Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome

Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний "телодвижений". Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо ...

Комментарии (114)

  1. Опубликуйте, пожалуйста, ещё вот эти хаки для Webkit-браузеров:
    www.ridev.ru/T2
    www.ridev.ru/Tq

    Спасибо! Очень часто пользуюсь этой страничкой и хорошо, что она всегда вверху в выдаче гугла.

  2. Спасибо за huck для Opera…

  3. *+color:#fff;
    -этот хак видит только ИЕ7

  4. привет всем!
    понимаю, что немного не в той весовой категории с вами….
    так как я не программер, но делаю сайты для себя и своего бизнеса!
    есть проблема с css в опере!
    вот ссылка — www.komarovskiy.kiev.ua — на главной странице в опере не работает функция флоат.
    в других броузерах все ок! а в опере фигня выходит!

    да и хотел спросить — что такое эти хаки?
    куда их нужно вставлять!
    я так понимаю, что если вставлю хак для оперы в код, то все будет ок???

    спасибо, жду ответ!

    • вот ссылка — http://www.komarovskiy.kiev.ua — на главной странице в опере не работает функция флоат.

      Не работает потому, что у p.text указана ширина (width : 670px;). Ширина текста же больше, чем место справа от изображения, поэтому текст и переносится вниз.

      да и хотел спросить — что такое эти хаки?
      куда их нужно вставлять!

      Хаки — это стили, который понимает только какой-то конкретный браузер. Вставляются туда же, куда и все остальные стили.

      я так понимаю, что если вставлю хак для оперы в код, то все будет ок???

      Да, если код будет правильным.

      • Спасибо за ответ!!
        Я все подправил….
        недавно уроки по СSS скачал, посмотрел, чуток нового подузнал….
        и исправил свои ошибки…. )
        теперь все пашет и в опере тоже… )))
        ну, и ширину, конечно же убрал…
        там с педдингами у меня возникли вопросы… но то такое…
        просто если задать картинке и тексту педдинги, то текст вылазит за свой контейнер и приобретает минусовое значение. решил этот вопрос тем, что задал ширину блока текста 97% , а не 100!
        думаю, что опять где-то напортачил… хотя хз..


  5. .style {
    _background: #F00;
    }
    /* код валидный */

    Похоже, все-таки невалидный. Не существует свойства

    _background

    .

  6. Читать коменты не хотса, может уже писали, но для IE6 оч полезный хак:

    width: 100px (для всех браузеров)
    -width:100px (персонально для IE6)

    это очень помогает, когда делаешь страничку с кучей инпутов, селектов и т.д. а как известно IE6 работает по своим законам, для расчета top,bottom,width,height, когда начинаеш использовать margin. Как можно реже используем margin…

  7. Привет, друзья!
    у меня снова есть небольшая проблемка! (((
    надеюсь, вы как всегда мне поможете!
    сейчас делаю себе сайтик, и все у меня хорошо, вот только в шестом эксплорере постоянно какие-то чудеса появляются!
    я уже сиэсэс файл переделывал раз 200!
    уже просто мозги едут!
    поэтому решил спросить совета.

    Итак, проблема вот в чем — у меня сайт с контентом и двумя боковыми меню, делаю я его на дивах.

    проблема возникает в шестом эксплорере — третья колонка тупо не влазит на страницу посредством флоат лефт, и висит снизу, что убивает сайт!
    это штука проявляется только в шестом эксплорере!
    я уже думаю даже не заморачиваться над этим!
    в мозиле, опере и сафари все работает на ура!
    также в шестом эксплорере (при чем на одном компе, на другом все нормально) в блоках — при добавлении именно третьего блока меню появляется неполадка — основание блока отделяется пробелом, что нарушает внешний вид!
    также есть проблема с прозрачностью пнг картинок, но над этия я уже даже не заморачиваюсь, так как понял, что вылечить это почти невозможно! где нет ссылок я полечил альфаканалами, где есть, не трогал, так как ссылка становится некликабельной!

    если есть у кого-то время, уделите плиз внимание моему сайту — надеюсь, что проблема не в эксплорере, а в моих слабых способностях! ))
    вот ссылка на сайт — http://www.booking.kiev.ua/new/probe.html

    ну, файл си эс эс в коде уже найдете…

    заранее спасибо, жду ответ по решению моей проблемы!

    P.S. у меня в принципе есть вариант решения проблемы, но тогда код становится немного идиотским, по крайней мере в дримвьюере нарушается визуальная конструкция сайт, все блоки где попало, наезжают друг на друга и т.д. мне кажется, что так неправильно, хотя браузеры видят все нормально! даже в шестом эксплорере все хорошо кроме пнг картинок (но там была другая проблема, пока ее решал, переделал свой сайт немного, в дримвьюере стало все ок, а вот в экплорере шестом появилась кака)
    если кому интересно — старый код с сиэсэс тут —
    http://www.booking.kiev.ua/new/dj_dansir.html

  8. Для 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;
    )

  9. Привет! )))

    Хэллбой — спасибо большое! )))
    разобрался — у меня в описании класса для тега ул были паддинги больше чем размер блока, поэтому не влазил третий блок. Исправил — уже все работает так как надо.

    Проблема с пробеом внизу блока была, наверное, также с этим связана, так как исчезла после устранения чрезмерного пэддинга.

    В целом все теперь работает хорошо…

    вот ссылка — http://booking.kiev.ua/new/

    Есть еще пару вопросом — может быть поможете и с этим?

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

    Так же у меня вопрос — на старом буке (вероятно стоит много всякого хлама уже) маленькие картинки — конкретно 4 фото на странице перед флеш плеером у меня определяются как реклама и вместо них отображается надпись белого цвета [AD].
    Что дает указание считать это рекламой??? Как сделать так, чтобы картинки нормально отображались?
    У меня это из 4 компов показывает только на одном, причем читал статьи — пишут, что это фаервол оутпост делает, у меня он также установлен, может дело в нем? просто на другом компе тоже стоит оутпост (правда более свежая версия) и ничего не режется.
    Есть ли правила для картинок, по которым они «рубятся»? может быть нужно сделать больше размер? (у меня 100х100 пкс)

    Буду очень благодарен помощи!
    заранее спасибо!

  10. внесу свою лепту

    для лисы

    .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 ;)

  11. Иногда хорошо, что хаки есть.

    А какой вы используете плагин, который сбоку слева находится?

  12. да статья на сегодняшний день маленько устарела , единственная причина это плохо работают хаки для opera но это не беда есть новые, и вот не давно вышла opera 10.6 так вот она кардинально отличается от 9 ветки кому нужны хаки для всех даже самых последних версий opera вот есть оригинальная статья читать

  13. Очень скептически после очередного проекта (http://legenda.megafonvolga.ru) отношусь к star-хакам (со *-чкой). Дело в том, что они понимаются и Операми, и IE 7 и считать их персональными смысла не имеет.
    Когда найду пример, постараюсь это показать.

    Кто-нибудь сталкивался?

  14. офигенный пост. постоянно к нему обращаюсь. пора бы уже для хрома обновить

  15. Большое спасибо! Материал для оперы актуален на 20.08.2010. пробовал сам.

  16. а как сделать что бы в таблице стилей вписать следующее:
    паример .my1 {border:1px solid blak} только для IE????

  17. А кто-то знает хак для оперы 9.25?

  18. noindex:-o-prefocus, .class {
    color:#fff;
    }

    Для Оперы 10 работает! Шикарно! Думал, уже не найду. mdss, спасибо!!!

  19. Статья, конечно, хорошая и полезная, спасибо. Но — есть одно «но» :)
    Мне, как, начинающему (да и многим начинающим, наверняка) совсем не ясно — для чего эти хаки, какие баги они фиксят? Можно было бы добавить описания, или, хотя бы ссылки на другие источники с описаниями багов. А?

  20. Спасибо за статью! Я лично использую хаки только для ИЕ 7 и 6. Для нормальных браузеров использовать хаки вообще смысле не вижу, так как они за крайне редким исключением «послушные». Да и такие браузеры, как правило, часто обновляются и пользователи не используют старые версии.

Ваш комментарий