Выравнивание блоков горе с IE7, как решить? - PullRequest
Новая
       12

Выравнивание блоков горе с IE7, как решить?

3 голосов
/ 21 декабря 2009

К сожалению, я должен поддерживать IE7 (и, предпочтительно, IE6) В IE8, Safari, Firefox, Chrome я получаю отличную компоновку, используя внешний div для включения двух блоков. 

------------------------------------
|                                  |
|  --------------     -----------  |
|  |            |     |         |  |
|  |     A      |     |    B    |  |
|  |            |     |         |  |
|  --------------     -----------  |
|                                  |
------------------------------------

Я использую встроенный блок для стиля A и B. A плавает влево, B вправо. Оба поля имеют внутренние элементы div и другие элементы.

Однако, когда я использую IE6 и IE7, я получаю это чудовище. 

------------------------------------
|                                  |
|  --------------                  |
|  |            |                  |
|  |     A      |                  |
|  |            |                  |
|  --------------                  |
|                     -----------  |
|                     |         |  |
|                     |    B    |  |
|                     |         |  |
|                     -----------  |
|                                  |
------------------------------------

Есть какие-нибудь однозначные ответы на то, что происходит и как это решить?

Ответы [ 2 ]

4 голосов
/ 21 декабря 2009

Во-первых, поместите DOCTYPE вверху вашего документа. Это заставляет IE переходить в режим соответствия стандартам, а не в режим причуд (оба эвфемизма). Например: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Во-вторых, если вам нужна совместимость с IE6, используйте числа с плавающей запятой (Эндрю совершенно прав, утверждая, что display: inline-block работает в IE7 только для элементов с натуральным display: inline, а <div> имеет натуральное display: block). Это должно работать: 

<div id="outer">
  <div id="left"></div>
  <div id="right"><>/div>
</div>

с: 

#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }

до тех пор, пока ширина слева и справа меньше ширины внешнего, включая отступы, границы и поля. Если нет, право перейдет к следующей строке.

1 голос
/ 21 декабря 2009

В IE 6 и 7 inline-block работает только с элементами, которые имеют естественное отображение: inline. Ваши коробки <div> с? Если да, это должно работать .. У вас есть тестовый пример? (Подробнее см. quirksmode.org !)

Взлом элемента inline-block элемента уровня IE : это может быть полезно для вас

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...