Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome
Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний "телодвижений". Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо ...
Комментарии (114)
Опубликуйте, пожалуйста, ещё вот эти хаки для Webkit-браузеров:
www.ridev.ru/T2
www.ridev.ru/Tq
Спасибо! Очень часто пользуюсь этой страничкой и хорошо, что она всегда вверху в выдаче гугла.
Они не персональные, поэтому не подходят.
Но ведь теоретически (!) не может быть различных хаков для chrome и safari, они же на одном движке. Один браузер по-сути. Может в следующих версиях ситуация изменится, конечно…
Спасибо за huck для Opera…
*+color:#fff;
-этот хак видит только ИЕ7
привет всем!
понимаю, что немного не в той весовой категории с вами…
так как я не программер, но делаю сайты для себя и своего бизнеса!
есть проблема с css в опере!
вот ссылка — www.komarovskiy.kiev.ua — на главной странице в опере не работает функция флоат.
в других броузерах все ок! а в опере фигня выходит!
да и хотел спросить — что такое эти хаки?
куда их нужно вставлять!
я так понимаю, что если вставлю хак для оперы в код, то все будет ок???
спасибо, жду ответ!
Не работает потому, что у
p.text
указана ширина (width: 670px;
). Ширина текста же больше, чем место справа от изображения, поэтому текст и переносится вниз.Хаки — это стили, который понимает только какой-то конкретный браузер. Вставляются туда же, куда и все остальные стили.
Да, если код будет правильным.
Спасибо за ответ!
Я все подправил…
недавно уроки по СSS скачал, посмотрел, чуток нового подузнал…
и исправил свои ошибки…)
теперь все пашет и в опере тоже…)))
ну, и ширину, конечно же убрал…
там с педдингами у меня возникли вопросы… но то такое…
просто если задать картинке и тексту педдинги, то текст вылазит за свой контейнер и приобретает минусовое значение. решил этот вопрос тем, что задал ширину блока текста 97%, а не 100!
думаю, что опять где-то напортачил… хотя хз.
.style {
_background: #F00;
}
/* код валидный */
Похоже, все-таки невалидный. Не существует свойства
_background
.
А информацию по этому поводу в статье я для кого написал?
Прошу прощения, читал статью по диагонали и не заметил. Всё правильно написано.
Читать коменты не хотса, может уже писали, но для IE6 оч полезный хак:
это очень помогает, когда делаешь страничку с кучей инпутов, селектови т. д. а как известно IE6 работает по своим законам, для расчета top, bottom, width, height, когда начинаеш использовать margin. Как можно реже используем margin…
Привет, друзья!
у меня снова есть небольшая проблемка! (((
надеюсь, вы как всегда мне поможете!
сейчас делаю себе сайтик, и все у меня хорошо, вот только в шестом эксплорере постоянно какие-то чудеса появляются!
я уже сиэсэс файл переделывал раз 200!
уже просто мозги едут!
поэтому решил спросить совета.
Итак, проблема вот в чем — у меня сайт с контентом и двумя боковыми меню, делаю я его на дивах.
проблема возникает в шестом эксплорере — третья колонка тупо не влазит на страницу посредством флоат лефт, и висит снизу, что убивает сайт!
это штука проявляется только в шестом эксплорере!
я уже думаю даже не заморачиваться над этим!
в мозиле, опере и сафари все работает на ура!
также в шестом эксплорере (при чем на одном компе, на другом все нормально) в блоках — при добавлении именно третьего блока меню появляется неполадка — основание блока отделяется пробелом, что нарушает внешний вид!
также есть проблема с прозрачностью пнг картинок, но над этия я уже даже не заморачиваюсь, так как понял, что вылечить это почти невозможно! где нет ссылок я полечил альфаканалами, где есть, не трогал, так как ссылка становится некликабельной!
если есть у кого-то время, уделите плиз внимание моему сайту — надеюсь, что проблема не в эксплорере, а в моих слабых способностях!))
вот ссылка на сайт — www.booking.kiev.ua/new/probe.html
ну, файл си эс эс в коде уже найдете…
заранее спасибо, жду ответ по решению моей проблемы!
если кому интересно — старый код с сиэсэс тут —
www.booking.kiev.ua/new/dj_dansir.html
Для Vano:
1.
Это бывает, если внутри блоков есть дочерний блок, который больше этих родительских. Откройте Firefox, установите Firebug и проверте width, padding і margin для блоков. Для совместимости с ИЕ 6 для блоков которіе под float используйте padding. (Подсказка: проверте ширину
#wrapper #middle #right .block_r .block_r_sr H3
)
2.
А эта проблемы бывает при очень маленькой всоте блока. Если высота мение 16px, стоит указывать для совместимости с ИЕ 6 параметр line-height. Он, обычно, на несколько px больше размера шрифта. Другие браузеры не берут во внимание этот параметр, а ИЕ6 жить без него не может. Значение параметра line-height достаточно указать на 1.2 px менше высоты блока. (Подсказка: если это блок
#wrapper #middle #right .block_r .block_r_niz
у него height:13px;
когда line-height: 18px;
)
Привет!)))
Хэллбой — спасибо большое!)))
разобрался — у меня в описании класса для тега ул были паддинги больше чем размер блока, поэтому не влазил третий блок. Исправил — уже все работает так как надо.
Проблема с пробеом внизу блока была, наверное, также с этим связана, так как исчезла после устранения чрезмерного пэддинга.
В целом все теперь работает хорошо…
вот ссылка — booking.kiev.ua/new/
Есть еще пару вопросом — может быть поможете и с этим?
Опера:
при открытии фотографий через ява скрипт флеш плеер налазит на фото и делает невозможным их переключение.
есть выход переместить фотографии, чтобы они не накладывались при открытии, но думаю, что возможно есть и другое решение.
Так же у меня вопрос — на старом буке (вероятно стоит много всякого хлама уже) маленькие картинки — конкретно 4 фото на странице перед флеш плеером у меня определяются как реклама и вместо них отображается надпись белого цвета [AD].
Что дает указание считать это рекламой??? Как сделать так, чтобы картинки нормально отображались?
У меня это из 4 компов показывает только на одном, причем читал статьи — пишут, что это фаервол оутпост делает, у меня он также установлен, может дело в нем? просто на другом компе тоже стоит оутпост (правда более свежая версия) и ничего не режется.
Есть ли правила для картинок, по которым они «рубятся»? может быть нужно сделать больше размер? (у меня 100×100 пкс)
Буду очень благодарен помощи!
заранее спасибо!
внесу свою лепту
для лисы
.class, noindex:-moz-any-link {
color:#fff;
}
для оперы
noindex:-o-prefocus, .class {
color:#fff;
}
для сафари и хрома и остальных вебкитовских браузеров
@media screen and (-webkit-min-device-pixel-ratio:0) {
.class {
color:#fff;
}
}
enjoy ;)
Для Оперы и FF не подходят, их понимает IE7.
Иногда хорошо, что хаки есть.
А какой вы используете плагин, который сбоку слева находится?
да статья на сегодняшний день маленько устарела, единственная причина это плохо работают хаки для opera, но это не беда есть новые, и вот не давно вышла opera 10.6 так вот она кардинально отличается от 9 ветки кому нужны хаки для всех даже самых последних версий opera вот есть оригинальная статья читать
Очень скептически после очередного проекта (http://legenda.megafonvolga.ru) отношусь к star-хакам (со *-чкой). Дело в том, что они понимаются и Операми, и IE 7 и считать их персональными смысла не имеет.
Когда найду пример, постараюсь это показать.
Кто-нибудь сталкивался?
Использую постоянно и еще ни разу не сталкивался с этим.
офигенный пост. постоянно к нему обращаюсь. пора бы уже для хрома обновить
Большое спасибо! Материал для оперы актуаленна 20.08.2010 . пробовал сам.
а как сделать что бы в таблице стилей вписать следующее:
паример .my1 {border:1px solid blak} только для IE???
<head>
<!--[if IE]>
<style type="text/css">
.my1 {
border:1px solid blak;
}
</style>
<![endif]-->
</head>
Извиняюсь, но фигня, в большинстве случаев не работает, и к тому же это подключаем в самой странице, а я прошу сказать как в таблице стилей сделать.
Блин, Вы такой привередливый, как Internet Explorer #6))
Ничего кроме как другой таблицы стилей Вам никто не предложит.
<head>
…
<!--[if IE]>
<link href="/templates/css/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
…
</head>
А кто-то знает хак для оперы 9.25?
noindex:-o-prefocus, .class {
color:#fff;
}
Для Оперы 10 работает! Шикарно! Думал, уже не найду. mdss, спасибо!!!
Статья, конечно, хорошая и полезная, спасибо. Но — есть одно «но» :)
Мне, как, начинающему (да и многим начинающим, наверняка) совсем не ясно — для чего эти хаки, какие баги они фиксят? Можно было бы добавить описания, или, хотя бы ссылки на другие источники с описаниями багов. А?
Поищите в Интернете статьи на тему «Что такое CSS-хаки» и все станет ясно.
Спасибо за статью! Я лично использую хаки только для ИЕ 7 и 6. Для нормальных браузеров использовать хаки вообще смысле не вижу, так как они за крайне редким исключением «послушные». Да и такие браузеры, как правило, часто обновляются и пользователи не используют старые версии.