Все чаще стал добавлять в ie.css богомерзкое в своей невалидности (по текущей спеке) правило:
#content {overflow-x:hidden;}Позволяет скрывать куски контента, переполняющие горизонтальные размеры блока. Полезно, когда код внутренностей берется черт-те-знает откуда или пишется индусами.
Нормальные браузеры к подобному перенасыщению относятся с некоторым пониманием, а вот в IE блоки начинают радостно скакать при малейшем поводе.
Не всесильно, use with caution.
Думаю, большинство разработчиков уже успели столкнуться с багом при обработке вложенных float’ов в седьмой Опере.
Наиболее часто это всплывает при работе с горизонтальными списками:
ul {
float:left;
}
li {
float:left;
}
Если для списка не задать ширину, то его элементы феерично выстроятся по вертикали. Во многих случаях проблему удается обойти обходными путями, но, к сожалению, не всегда.
Чип и Дейл спешат на помощь, собственно. Небольшая js-функция, которая возвращает все на свои места (для определения версии браузера используется Browser detect от PPK).
function fixOpera () {
if (BrowserDetect.version < 8) {
var listWidth = 0;
var list = document.getElementById('test');
var listItems = list.getElementsByTagName('li');
for (var i = 0; i < listItems.length; i ++) {
listWidth += listItems[i].offsetWidth;
}
list.style.width = listWidth;
}
}По необходимости меняем теги на нужные.
Рабочий пример. Для заценки необходима седьмая Опера, разумеется.
Кажется, уже любое упоминание слов div и table в одном предложении вызывает позывы к тошноте у всех кодеров. А я все равно скажу, как раз время послеобеденное.
Я использую таблицы для тех вещей, когда можно обойтись без них. Примерно в следующих неоправдываемых случаях:
Если я слышу срок сдачи “вчера”, в моем мозгу переключается рубильник. Разумеется, я все равно сделаю картинку с подписью definition list’ом, а не таблицей. Но только потому, что мне так просто удобней. А вот разложить колонки в сложном макете таблицей — не буду испытывать никаких угрызений совести. Даже покажу кому-нибудь, потому как не стыдно ни разу.
Очень много разговоров о том, что таблицы плохо смотрятся без стилей. Да, я помню про vertical-align и иже с ними. И что? Div’ы позволяют сохранить look&feel с отключенными стилями? Наладонники-шмаладонники, печать страниц.. Брр. Все равно, если есть необходимость — мы пишем стили для печати и handheld’ов. К чему фанатизм?
Размер кода. Шмаразмер, блин. Таблица с четырьмя ячейками займет места не больше, чем три extra-wrapper’а. При этом работать с таким кодом будет легче. Впрочем, последний тезис — лишь мое скромное мнение.
О! Шаманство. Знаете, я не любитель бубнов. Конечно приятно написать fix для седьмой Оперы типа такого:
#id ul li {
display:table-cell;
display:inline-block;
}
* HTML #id ul li {display:inline;}Но это быстро надоедает. Когда поддержка CSS в IE достигнет уровня последнего Огнелиса, а старые Оперы и Нетшкафы перестануть фигурировать в browser list’ах — я буду счастлив, а до тех пор я не стесняюсь таблиц.
Пусть заголовки будут заголовками, списки списками, а колонки колонками. Мне не интересны faux columns и жонглирования margin/padding’ами. Я хочу логики, стабильности и простоты. В таких случаях я делаю и пока буду делать таблицу. Хоть режьте, хоть не режьте.
P.S. И даже не говорите мне о поисковой оптимизации, лучше не надо.
IE 7, conditional comments и хаки
2 ноября 2006 · HTML/CSS, Рецептарий
В свете особенностей нового IE приходится править старые методы использования хаков.
Оптимальным вариантом для меня является подключение специфичного листа стилей для всех IE через conditional comments.
И использование классического сочетания «star html hack» и метода экранирования для старых IE, а также варианта без хаков для седьмого.
В результате в ie.css используются конструкции примерно следующего вида:
А у нас в квартире газА какими методами пользуетесь Вы?P.S. Пример с height:auto имеет абстрактный характер, height:1% для self clearing вполне достаточно.
Теги: clearing · conditional comments · css · ie · хаки
Комментариев: 24