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

Если вы запустите простую HTML страницу по адресу:DIV-х ведут себя по-разному в IE против Firefox

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>

источник

2010-03-02 John Livermore

Введите код, как и обычный текст, а затем вы можете: выбрать код и нажать кнопку 101010 (над текстовым полем, в который вы ввели), или вы можете отложить каждую строку кода на четыре пробела (это для кодовых блоков), для встроенного кода просто добавьте и добавьте обратно-тик. –

Спасибо, @mercator, я как раз собирался сделать это ... =) –

@ricebowl спасибо за ваше объяснение. Я как раз собирался сделать это *. ;) – mercator

Обратный порядок ваших div и он будет работать. Это помещается первая секунда, а вторая первая - в разметку.

<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>

источник

2010-03-02 18:47:40 Robusto

Данное предложение наряду с предложением DOCTYPE (сверху) исправило проблему. Всем спасибо! Я очень ценю это! –

use 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>

источник

2010-03-02 18:45:25 NebuSoft

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

источник

2010-03-02 18:48:13 Tom

Удаление 'display: inline' на самом деле не требуется, так как' float: left' должно заставить их отображаться как элементы блоков в любом случае (перегрузка 'display: inline'). –

На самом деле иногда бывают случаи, когда я помещаю 'display: inline' в плавающий элемент только потому, что это исправляет ошибку IE7 CSS. , , хотя в браузере, совместимом с W3C, который имеет 'display: inline' на float, ничего не должен делать. –

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

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

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

источник

2010-03-02 18:49:41 mercator

Хороший вопрос, но здесь неважно. Наличие правого элемента div сначала работает даже в скелете html. – Robusto

@Robusto Не имеет значения, поскольку режим quirks заставляет IE8 отображать оба divs как блоки, которые должны быть только правильными (согласно спецификациям). Добавление doctype исправляет и позволяет обеим divs появляться в одной строке (отвечая на исходный вопрос). Тем не менее, просто добавление doctype все равно оставляет хотя бы IE7. Перестановка divs фиксирует это. – mercator

Да, я удалил свой DOCTYPE b/c, это не повлияло на мой оригинальный пример. Однако к тому времени, когда я выделил проблему с гораздо более простым HTML с исходной страницы, DOCTYPE действительно изменил ситуацию. Добавляем мой XHTML STRICT DOCTYPE обратно вместе с комментарием для перемещения float: ни одного элемента в конец (в моем примере два DIV, но у оригинала три), исправлена проблема. –

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

ответ

Смежные вопросы