IE6 CSS дисплей: таблица исправлена? - PullRequest
0 голосов
/ 16 марта 2011


Я работаю над веб-приложением ... к сожалению, оно должно работать с худшим программным обеспечением, когда-либо написанным, да, т.е. 6.

Мне действительно нравятся CSS display:table и display:table-cell свойств, но, конечно, он не работает, т. Е.

Кто-нибудь нашел какие-либо исправления для этого?Я искал, но ничего не нашел.
Условный CSS, .htc файлы, javascript ... что-нибудь?
Я бы очень хотел избежать создания всего с плавающими и очищающими

Ответы [ 2 ]

2 голосов
/ 16 марта 2011

Извините. Не существует исправления для поддержки IE6 CSS display:table. Единственный способ добиться этого макета в IE6 - использовать элементы <table>.

Первый вопрос: вам действительно нужно поддерживать IE6? Если вы просто откажетесь от поддержки, вы сами решите массу проблем, включая эту. В настоящее время глобальное использование IE6 ниже 3% и даже ниже в большинстве развитых стран.

Если вам по-прежнему требуется поддержка IE6, то самым очевидным решением будет просто проглотить гордость за семантическую разметку и просто использовать тег <table>.

Как описано @Tom, следующее лучшее решение - написать макет, используя display:inline-block;.

inline-block позволяет вам определять ваши элементы как блоки, но при этом сохранять их в текстовом потоке (вроде как тег <img> работает по умолчанию). Если вы комбинируете это с фиксированной шириной элемента и делителем ваппера вокруг строк, вы можете получить что-то похожее на таблицу, хотя может быть трудно заставить ее динамически расширяться с шириной страницы.

Единственная большая ошибка в этом вопросе заключается в том, что inline-block работает только в IE6 / 7 для элементов со стилем по умолчанию display:inline. Другими словами, это работает для <span>, но не для <div>. Не беда, но что-то, о чем нужно знать, тем более что вы специально спрашиваете о поддержке IE6. Помимо этого, хорошая новость заключается в том, что вы сможете без проблем использовать display:inline-block без каких-либо других хаков или обходных путей.

0 голосов
/ 16 марта 2011

IE не поддерживает display: table и display: table-cell, но IE7 и ниже поддерживают display: inline-block.Обычный способ сделать эту работу заключается в следующем:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

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

Из-за недопонимания позвольте мне уточнить код выше.Дисплей: -moz-рядный стек;объявлен для более старых версий Firefox.увеличение: 1;IE имеет свойство с именем hasLayout , это способ его запуска.* display: inline известен как взлом * свойства, используемый для сокрытия этой строки от всех браузеров не IE

Увеличение: 1 и * display: inline эффективно позволяют элементам уровня блока вести себякак встроенные элементы (чтобы встроенный блок работал в IE6 +)

Для получения дополнительной информации, пожалуйста, прочитайте:

  1. http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
  2. http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
...