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

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

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

  1. К сожалению еще один хак придет перенести в статус не персональные

    @media all and (min-width: 0) {
    .style { background: #FF0; }
    }
    его теперь воспринимает и Google Chrome :(

  2. Ух ты.. Вот это круто. В одном блоге и столько. Спасибо! Буду пользоваться..

  3. Благодарствую за хаки для IE7, а то вчера мучился с одним блоком, во всех браузерах нормально отображается, а в ИЕ на 2px больше высота, чем нужно.

  4. респект за хаки для Opera и Safari. Очень помогли мне с версткой одного непростого макета

  5. Урааааааааааааааааааааа….. Вы мой спаситель =))))))))))) Спасибо большое! Нужная весЧ!!!!!!!!!

  6. Safari и Хром — это все движок Веб кит, на этом движке еще куча браузеров

  7. Недогнал помогите.
    Есть файл со стилями:
    #baner_right {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 189px;
    height: 256px;
    border: 0;
    }
    #parent {
    position: relative;
    }

    Есть прозрачная картинка:

    и второй id=»parent» я присваиваю таблице в Opera и IE все ок а в мозиле не привязывается к таблице которой я присвоил второй id.

  8. Добовление:
    Есть прозрачная картинка:

  9. Господа, разве вы не понимаете, что все хаки, основанные на селекторах CSS3 — дело крайне ненадежное.

  10. И для хрома уже найдены там же, откуда ты эти взял ))

  11. СПАСИБО! Классно! Мучал IE 7 с CSS помогло!

  12. Спасибо большое, очень помогли. Как ни странно, но Opera и FF у меня отобразили xHTML по-разному, в первый раз такое. поправил, спасибо :)

  13. Вот здесь я специально собрал провереннную отличную подборку css хаков. Надеюсь вам поможет: http://studioad.ru/blog/css_haki_css_hacks_css_filters/2009-09-30-92

  14. Использования хаков черевато. Они будут работать до тех пор пока разработчики браузера для которго работает хак не залатают дыру. :)
    И вообще считается, что это плохой тон :) хотя я их иногда использую.
    Dimox, для хрома тоже появились хаки, добавь в статью.

  15. Димокс, каждый раз когда нужны мне хакки, всегда ползу в гугл и ищу там твой блог. Все лень записать себе твои находки ! ) И сегодня пришел за Оперой… иногда выбрыкивается зараза )

  16. @media all and (min-width: 1px) { html:first-child .style { .style { background: #FF0; } }
    — решение для Opera 8

  17. поставил давиче лисицу 3.6 и был неприятно удивлен,
    вот этот любимый хак теперь не работает в ней:

    @-moz-document url-prefix() {
         .selector {
              бла бла бла;
         
         }
    }

    замены так и не нашел, чтобы и в 3.6 работало, может кто-нибудь уже что-нибудь нарыл для новой лисицы?

  18. Мир Вам.
    Верстаю на 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.
    Забыл добавить: Спасибо за хаки :)

  19. В опере размер шрифтов меньше 9px вообще реально уменьшить. из-за этого все едет, а так хаки для нее рабочие, все остальное меняется. Спасибо.

  20. Отличная статья. Все хаки на изусть не помню. Набираю в гугле запрос «css хаки» и попадаю именно на эту страницу. :)

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