Кнопки не выровнены в Internet Explorer (CSS)

Question

Это мой код:

<h3 align="center">Is the mobile number above correct ?</h3>
    <div class="yesno"><a href="bugme_pay.php"><div id="yes">YES</div></a>
    &nbsp;&nbsp;&nbsp;<a href="#" class="nope"><div id="no">NO</div></a></div>

Это мой CSS:

/* yes and no buttons */

#yes
{
    float:left;
    display:inline;
    width:180px;
    background: #999999;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    padding-top: 10px;padding-bottom: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 0.4em;
    margin-top: 0.4em;
}
#yes a:visited,
#yes a:link{
color: #fff;
}

#yes:hover {
background-color: #9fd106;
cursor:pointer;
}

#no
{
    float:right;
    display:inline;
    width:180px;
    background: #999999;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    padding-top: 10px;padding-bottom: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 0.4em;
    margin-top: 0.4em;
}
#no a:visited,
#no a:link{
color: #fff;
}
#no:hover {
background-color: #f20909;
cursor:pointer;
}
.yesno
{
width:400px;
margin-left:100px;
}

Это проблема:

У меня также есть переключатель div, чтобы скрыть / показать div.Это:

<!--show hide div logic-->
<style> 
div#a {  }
div#b { display:none; }
</style>
<script type="text/javascript">
$("a.nope").click(function(){
                 $("#a").hide();
                 $("#b").show();
                 return false;
         });
         </script>
    <!--//end show hide div logic-->

Answer 1

Нельзя обернуть встроенный элемент (а) вокруг элемента блока (div).Используйте SPAN вместо DIV, поскольку span является встроенным элементом.

Используйте что-то вроде этого:

<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno">
   <span id="yes"><a href="#">YES</a></span>
   <span id="no"><a href="#" class="nope">NO</a></span>
</div>

Answer 2

Или просто поместите кнопки в контейнер div:

#colcontainer {
float:left;
width:100%; 

}

Возьми этот div и оберни его вокруг своих кнопок.

Это должно сделать это.

Answer 3

Ширина #yes и #no составляет 180 пикселей, поэтому кнопки сами по себе потребляют 360 пикселей.Ширина <div class="yesno"> составляет 400 пикселей, поэтому у вас осталось 40 пикселей.У вас также есть три неразрывных пробела.Все выглядит хорошо, если вы убираете неразрывные пробелы, поэтому я предполагаю, что IE выделяет более 40 пикселей для неразрывных пробелов.

Вы можете сделать .yesno шире, чтобы приспособить всеразличные браузеры будут отображать неразрывные пробелы, или вы можете отказаться от   kludge и позволить явной ширине #yes, #no и .yesno позаботиться о разделении кнопок.

И да, вы должны использовать <span> здесь вместо <div>, как отметил ГленнГ, но здесь проблема не возникает.

Answer 4

Гленн верен, вы не можете иметь элемент BLOCK, такой как DIV, внутри элемента INLINE, такого как тег A.

Мое короткое также правильно.

Кроме того, вы не должны включать nbsp;Вы должны использовать CSS для форматирования.Вы также можете удалить множество необоснованных HTML-тегов и CSS

Например, http://jsbin.com/agojo4/5/edit

Это можно улучшить еще больше, но это всего лишь 2-минутная работа.