Проблема с плавающей точкой в ​​IE

Question

#a {

margin-top:25px;
float:right;
width:390px;
margin-left:0px;
margin-right:48px;
padding-left:5px;
border:thin;
 border-color:#999999;
 border-style:solid;
 border-radius: 10px;
 margin-bottom:50px;
}

#b {
margin-top:25px;
/*margin-right:450px; */
width:390px;
margin-left:50px;
margin-right:0px;
/* padding-right:5px; */
border:thin;
 border-color:#999999;
 border-style:solid;
 border-radius: 10px;
 margin-bottom:50px;


}

Но проблема в том, что #b не отображается параллельно #a (в той же строке) только в IE

Answer 1

Порядок вашей разметки также имеет значение.Я предполагаю, что ваша разметка выглядит примерно так:

<div id="b"></div>
<div id="a"></div>

Большинство браузеров отображают это правильно, но на самом деле это неправильный способ упорядочить блочные элементы для плавающего, и IE не компенсирует это.Правильный порядок:

<div id="a"></div>
<div id="b"></div>

Если вы сделаете это иначе, IE визуализирует элемент блока «b» и воспринимает его как потолок, мимо которого элемент с плавающим блоком «a» не может пройти.

Если я ошибаюсь из-за порядка разметки, это может быть проблемой вычисления ширины, как предложил @wajiw.

Answer 2

Добавьте position:relative; к вашим объектам.Возможно, вам придется сделать это с тем, что содержит #a и #b.

Возможно, вам также придется добавить float:left; к # a