Позиция DIV неверна в IE

Question

Я знаю, что IE когда-то невозможен. У меня есть 6 divs, выровненных вправо, используя float. Вот код: http://jsfiddle.net/jcay3/1/. Проблема в том, что в IE он находится ниже панели, в которую он должен быть помещен.

Есть ли решение? Я слышал, как много разработчиков говорили о комментариях, особенно для IE. Решают ли они проблему? Я попробовал его в режиме совместимости (IE9). Что делать, если в IE 6 отображается правильно и в IE 7 неправильно? Должен ли я добавить специальный код только для IE 7? Или нет такого риска?

Есть ли другое решение? Проще? Спасибо

Answer 1

Ваша проблема в теге img.
Если вы избавитесь от него, divs будут там, где они принадлежат.
Поместите img в div, если сможете.

Answer 2

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

Попробуйте этот вариант: http://jsfiddle.net/jcay3/5/

Разницей является overflow: hidden на контейнере .menuBar, что приводит элемент к самостоятельным ясно, размещенным элементам.

Я также установил высоту для размещения границ и установил элемент .menuBarContainer на 100% ширину, чтобы он не переполнял JSFiddle.

У меня нет IE, работающего на этой машине, но я уверен, что это будет работать как минимум в IE7. Дай мне знать, если я ошибаюсь, и я снова посмотрю на это.

Answer 3

Вы не должны доверять режиму совместимости IMHO. Только MS virtual machines with one different IE in each one в порядке, если у вас ОС с IE9.
Я видел (ERR мои коллеги видели) несуществующие ошибки с IE8-как-IE7, с IE Tester и т.д.

Да они огромны, но это спасет вас от нескольких часов отладки не- существующие ошибки. В (старых) IE уже есть настоящие ошибки! ;)

Что касается вашей проблемы, он существует как в IE6, так и в IE7, и я могу решить его с помощью img { float: left; }, но я далеко не уверен, что это лучшее решение.

Answer 4

Для правильного отображения на старых версиях Internet Explorer, а также для более эффективной поддержки кросс-браузера, вы должны плавать противоположный элемент:

Посмотреть этот working Fiddle пример!

Добавить этот CSS

.menuBar .menuBarContainer img { 
    float: left; 
} 

Кроме того, необходимо учитывать, что элемент, который не содержит в себе ничего, но плавал элементы будут разрушаться в height, потому что ребенок не плавал элементы больше не находятся в нормальном потоке документа.

Это означает, что ваш .menuBarContainer не будет иметь height, что вызовет возможные визуальные проблемы для элементов после него.Лучший способ исправить это использовать CSS clear перед закрытием этого элемента:

CSS

.clear { 
    clear:both; 
} 

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

---

Как примечание стороны, у вас есть дополнительное закрытие </div> на вашей скрипке примера.