DIV ведет себя по-разному в IE против Firefox - PullRequest
Новая
       11

DIV ведет себя по-разному в IE против Firefox

1 голос
/ 02 марта 2010

Если вы запустите простую HTML-страницу, найденную по адресу:

http://ss.bigwavesoftware.net/2.htm

в IE8 и FireFox 3.5.8, DIV отображаются по-разному. В IE они ведут себя как блочные элементы, а FireFox - как встроенные элементы. Мне нужно, чтобы они работали как встроенные в обоих браузерах. Может кто-нибудь предложить обходной путь, чтобы заставить их отображать встроенные в IE8, а также FireFox? 

<html>
<body>
    <div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
    </div>
    <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
</body>
</html>

Ответы [ 4 ]

3 голосов
/ 02 марта 2010

Добавьте тип документа в самом начале вашего документа. Он отображается в режиме quirks . Э.Г. 

<!doctype html>
<html>
... etc.

О, а что именно вы подразумеваете под "вести себя как встроенный"? Вы просто подразумеваете, что хотите, чтобы они отображались рядом, или вы действительно хотите ширину и высоту, которые должны игнорироваться (как указывал Том )? Потому что вы не сможете сделать последнее для плавающих элементов. display: inline бесполезен на поплавках ( за исключением исправления ошибок IE6 ), потому что «встроенные» поплавки автоматически превращаются в блок .

3 голосов
/ 02 марта 2010

Обратный порядок ваших divs, и это будет работать. То есть в разметке первая секунда, а вторая первая. 

<html>
<body>
     <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
     <div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
    </div>

</body>
</html>
1 голос
/ 02 марта 2010

Вы не можете установить высоту и ширину для встроенных элементов. Если вы хотите, чтобы ящики были выложены так, как они есть в Firefox, уберите отображение: inline и поместите левую рамку.

0 голосов
/ 02 марта 2010

использовать float: left вместо float: none в первом div (тот, что слева). 

<html>
<body>
    <div style="display: inline; float: left; width:100px; height:100px; border:1px solid red;">Left Box
    </div>
    <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...