Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний "телодвижений". Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо ...
Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня – это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет ...
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
Что-то много в последнее время мне глаза попадается информации, касаемой браузеров и поддержки ими стандартов. И мне это обстоятельство несомненно очень даже нравится. На хабре рассказали о том, что ожидаемая ...
В очередной раз хочется затронуть тему CSS-хаков. Только не подумайте, что я заядлый CSS-хакер :), дело в моем стремлении все упрощать. Так вот, для себя я выделил альтернативу условным комментариям, ...
Комментарии (114)
К сожалению еще один хак придет перенести в статус не персональные
@media all and (min-width: 0) {
.style { background: #FF0; }
}
его теперь воспринимает и Google Chrome :(
Ух ты.. Вот это круто. В одном блоге и столько. Спасибо! Буду пользоваться..
Благодарствую за хаки для IE7, а то вчера мучился с одним блоком, во всех браузерах нормально отображается, а в ИЕ на 2px больше высота, чем нужно.
респект за хаки для Opera и Safari. Очень помогли мне с версткой одного непростого макета
Урааааааааааааааааааааа….. Вы мой спаситель =))))))))))) Спасибо большое! Нужная весЧ!!!!!!!!!
Safari и Хром – это все движок Веб кит, на этом движке еще куча браузеров
Недогнал помогите.
Есть файл со стилями:
#baner_right {
position: absolute;
top: 0px;
right: 0px;
width: 189px;
height: 256px;
border: 0;
}
#parent {
position: relative;
}
Есть прозрачная картинка:
и второй id=”parent” я присваиваю таблице в Opera и IE все ок а в мозиле не привязывается к таблице которой я присвоил второй id.
Текст картинки: (
)
Информации явно недостаточно.
Что значит, второй id? id, это не class, чтоб его по несколько раз к разным тегам присваивать. Идентификатор, должен присутствовать на странице только один раз.
id уникальная консрукция. Он в коде может быть только один.
Добовление:
Есть прозрачная картинка:
Господа, разве вы не понимаете, что все хаки, основанные на селекторах CSS3 – дело крайне ненадежное.
И для хрома уже найдены там же, откуда ты эти взял ))
СПАСИБО! Классно! Мучал IE 7 с CSS помогло!
Спасибо большое, очень помогли. Как ни странно, но Opera и FF у меня отобразили xHTML по-разному, в первый раз такое. поправил, спасибо :)
Вот здесь я специально собрал провереннную отличную подборку css хаков. Надеюсь вам поможет: http://studioad.ru/blog/css_haki_css_hacks_css_filters/2009-09-30-92
Спасибо. Хорошая работа.
Использования хаков черевато. Они будут работать до тех пор пока разработчики браузера для которго работает хак не залатают дыру. :)
И вообще считается, что это плохой тон :) хотя я их иногда использую.
Dimox, для хрома тоже появились хаки, добавь в статью.
Персональный хак для хрома я пока не нашел.
Для Chrome
body:nth-of-type(1) p {
color: #333333;
}
Прежде, чем писать, проверять нужно. Распознается все современными браузерами.
Димокс, каждый раз когда нужны мне хакки, всегда ползу в гугл и ищу там твой блог. Все лень записать себе твои находки ! ) И сегодня пришел за Оперой… иногда выбрыкивается зараза )
Рад, что мой блог тебе полезен.
@media all and (min-width: 1px) { html:first-child .style { .style { background: #FF0; } }
– решение для Opera 8
поставил давиче лисицу 3.6 и был неприятно удивлен,
вот этот любимый хак теперь не работает в ней:
замены так и не нашел, чтобы и в 3.6 работало, может кто-нибудь уже что-нибудь нарыл для новой лисицы?
У меня он работает, как и прежде.
Мир Вам.
Верстаю на XHTML transitional и strict. Для большинства бесплатных браузеров хаки не использую, так как они валидную верстку имеют за родную и не капризничают.
Был, правда, случай, когда Submit маленькой высоты был и текст на дне кнопки. Вышел с положения при помощи ссылки и обработчика document.form.submit ();
А вот с Internet Explorer 6.0 & Co © Microsoft всегда всело. Особенно:
1. С PNG 24 и альфа каналом (прозрачностью).
2. С :HOVER для тегов, отличных от А.
Раньше исправлял при помощи хаков с JavaScript. Но отказался, так как могут быть конфузы со слоями (выпадающее меню прячеться под “обработаной” PNG с прозрачностью. Спасибо за *html для IE 6. Для надежности, пользователям этого браузера я предложу низкокачественный гиф ).
В ответ, поделюсь собственными наработками, может кому-то будет кстати:
1. Для форм высоту INPUT полей лутчше задавать размером шрифта и падингами. Не в коем случае не выставлять ее для SELECTов. В ИЕ 7 и ИЕ8 может быть больно.
2. В ИЕ 6 если дивы с флоатами в прытык по ширине, но для их не выставленны падинги – будут съезжать.
3. Что бы не колапсировали и не делали дефейса дивы и др. бочные елементы с жостко заданой высотой и шириной пользуемся overflow: hidden;
4. outline: none; (css) для FF, что бы не было рамки вокруг ссилки при клике.
5. На последок: ждем смерти ИЕ6 (ничего не делаем для его совместимости) и соглашаемся, что все таки кое-что в майкрософт MUST DIE.
Забыл добавить: Спасибо за хаки :)
В опере размер шрифтов меньше 9px вообще реально уменьшить. из-за этого все едет, а так хаки для нее рабочие, все остальное меняется. Спасибо.
Отличная статья. Все хаки на изусть не помню. Набираю в гугле запрос “css хаки” и попадаю именно на эту страницу. :)