Css for ie and chrome

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

Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний «телодвижений». Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать. По мере посещения различных зарубежный интернет-ресурсов по веб-разработке, обнаруживаю для себя все новые и новые CSS-хаки, которые можно применить персонально для одного из популярных сегодня браузеров: Opera, FireFox, Internet Explorer, Safari, Google Chrome. По мере обнаружения новых хаков, данный список будет дополняться.

CSS-хаки для браузера Opera

 html:first-child .style < background: #F00; >/* код валидный */ /* только для Opera < 9.5 */ 

 opera:-o-prefocus .style < background: #F00; >/* для Opera 9.5 - 12.16 */ /* вместо "opera" можно подставить любое слово/символ */ 

CSS-хак для браузера FireFox

CSS-хаки для браузера Internet Explorer 6

Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию.

CSS-хаки для браузера Internet Explorer 7

 *:first-child+html .style < background: #F00; >/* код валидный */ 

CSS-хак для браузера Internet Explorer 8

CSS-хак для браузера Internet Explorer 9

CSS-хак для браузера Internet Explorer 10

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) < .style > 

CSS-хаки для браузера Safari

 body:last-child:not(:root:root) .style < background: #F00; >/* для Safari < 4.0 */ 

 html[xmlns*=""] body:last-child .style < background: #F00; >/* для Safari < 4.0 */ 

CSS-хаки для браузера Google Chrome

Смотрите также

• Меняем цвет фона выделенного текста с помощью CSS 36 комментариев
• 10 фиксов, решающих проблемы Internet Explorer 6 58 комментариев
• Internet Explorer 8 проходит тест Acid2 17 комментариев
• CSS-хаки vs Условные комментарии 15 комментариев

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

Здравствуйте! У меня проблема, в IE не работает слайд-шоу на квери. Какой хак и куда добавить, чтобы браузер автоматически отображал слайд-шоу? Спасибо.

IE капризничает с JavaScript если в коде JavaScript есть ошибка (при условии, что во всех других браузерах работает). В окне IE слева внизу проверить индикатор, или воспользоваться Консоль ошибок в FF или Opera.

Верстаю новый шаблон для своего блога. Столкнулся с проблеммой использования/отображения в Google chorome CSS правила:

-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topright: 5px; / и так далее./ 

Верстаю разумеется в Firefox но основной акцент делаю на стабильном отображении в chrome. Я заметил, что у флектора на http://www.wordpressplugins.ru/ у меня в гугл хроме все стили типа

отображаются стабильно! Но если я в своём шаблоне применю это правило, то в хроме оно не работает 🙁 Этот пост уже довольно старый или я не разбираюсь в хаках, в общем может кто знает, что нужно сделать чтобы и у меня тоже эти правила работали в google chrome.

Источник

CSS хаки

Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.

Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.

Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности. (с) Lurkmore

Грязный хак — это быстрое решение какой-либо проблемы, в основном в краткосрочной перспективе, лишающее сущность код внутренней красоты и дисгармонирующее с её внутренним устройством. (с) Lurkmore

CSS-хаки для браузера Internet Explorer

PNG в IE6 :
Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элeментов, в файле cssf-ie6.css. Используется IE PNG Fix v1.0 RC4 последней версии.

html>body .class < >head+body .class < >html:first-child .class

*|html .class < >html:not([lang*=""]) .class

Conditional comments в IE :
Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой:

  /* Using conditional comments with head section CSS */ [if IE]> style type="text/css"> /************ css for all IE browsers ****************/ /style> [endif]--> /* Using conditional comments with HTML elements */ [if IE]> div class="ie-only"> /*content*/ /div> [endif]--> Using media query /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)  selector  property:value; > > /* IE6,7,9,10 */ @media screen and (min-width: 640px), screen\9  selector  property:value; > > /* IE6,7 */ @media screen\9  selector  property:value; > > /* IE8 */ @media \0screen  selector  property:value; > > /* IE6,7,8 */ @media \0screen\,screen\9  selector  property:value; > > /* IE9,10 */ @media screen and (min-width:0\0) selector  property:value; > > 

#Microsoft Edge

@supports (-ms-ime-align:auto)  selector  property: value; > > 

Источник