пожалуйста, подскажите, возможно ли в стилевом файле прописать правило так, чтобы оно воспринималось только Ie7?
Вид для печати
пожалуйста, подскажите, возможно ли в стилевом файле прописать правило так, чтобы оно воспринималось только Ie7?
очень жаль, что ответ на этот вопрос так и не найден... (((
QuickSite, есть разные способы добиться определенного отображения элементов для разных версий IE.
1-й способ) Использовать условные комментарии (Conditional comments) при линковании таблиц стилей между <head></head>. Пример:
<head>
<!-- Основная таблица стилей -->
<link href="main.css" rel="stylesheet" type="text/css">
<!-- end -->
<!-- Для всех версий IE -->
<!--[if IE]><link href="ie.css" rel="stylesheet" type="text/css"><![endif]-->
<!-- end -->
<!-- Для IE 7 -->
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css"><![endif]-->
<!-- end -->
<!-- Для 6.0, 5.5, 5.01 -->
<!--[if lte IE 6]><link href="ie6.css" rel="stylesheet" type="text/css"><![endif]-->
<!-- end -->
</head>
2-й способ) это использование хаков. В отличие от условных комментариев, хаки не обязательно разносить по отдельным файлам. Пример:
CSS:
p.text1 {
backgroung: #0099CC;
//background: #00FF99;
_background: #0099CC;
\\background: #FFCC99;
}
HTML:
<p class="text1">Цвет фона данного абзаца будет закрашен в зависимости от версии IE</p>
первое свойство увидят все браузеры;
второе - проигнорируют все браузеры кроме IE 7.0 и меньше;
третье - проигнорируют все браузеры кроме IE 6.0 и меньше;
четвертое - проигнорируют все браузеры кроме IE 5.0 и IE 5.5
а это свойство
CSS:
*:first-child+html p.text1 {
background: #CC66CC;
}
воспримит только IE 7
3 способ) это использование JavaScript`ов для определения типа и версии браузера, и, исходя из полученных данных, загружать определенный стиль.
Exterior, спасибо, обязательно воспользуюсь каким-либо из перечисленных методов.
как прописать правило в Css файле, чтобы оно воспринималось только оперой?
Ответ на вопрос найден. Прошу прощения за беспокойство. Если кому интересно, то:
CSS-хаки для браузера Opera:
- @media all and (min-width: 0)
- {
- .style { background: #FF0; }
- }
- html:first-child .style
- {
- background: #FF0;
- }
- /* код валидный */
CSS-хаки для браузера FireFox:
- html:root .style
- {
- background: #FA0;
- }
- /* хак понимает Safari */
- .style, x:-moz-any-link
- {
- background: #FA0;
- }
Напишите, пожалуйста, конкретно, что и где прописать, чтобы заставить такое:"произвольный_тег" :hover{}работать в IE6!!!
Slash, вообще, чтобы CSS-правило воспринималось только IE6 и ниже, надо написать так:
произвольный тег :hover
{
_произвольное свойство:произвольное значение
}
Тут вся магия в символе подчёркивания перед свойством.
Чиловек имел ввиду скорее всего немного другое... Но выразить понятно свою мысль не смог.
Дело в том, что IE6 и ниже не воспринимают псевдокласс :hover не для каких элементов кроме ссылок.
Тоесть a:hover и капес. В то время как другие браузеры (в том числе и IE7) работают нормально и с другими элементами.
m1kola, проблема решается джаваскриптом. На сайте лебедева можно найти пример.
Да, кстати, уже достаточно долго существует проект называется_не_помню_как, который разрабатывает джаваскрипт (и последние версии очень даже удачны), заставляющий все браузеры ie обрабатывать код так, как если бы его обрабатывал ie7. Конечно, эстеты будут против, но, согласитесь, бывают случаи, когда проблемы совместимости необходимо решать любой кровью.
На днях как раз систематизировал хаки в одну кучку:
Internet Explorer 6.0 и ниже
/*\*/
* html {}
/**/
/* Хак только для IE6 */
Если перед свойством в css поставить подчеркивание “_”, или дефис “-”, то эти свойства будут восприниматься только IE версии 6 и ниже:
.style {_background:#F00;}
\\width:100px; - видят только ie 5.0 и ie 5.5 (неактуально)
Звездочка. Работает для IE7 и ниже:
p { background:red; /* Применимо ко всем браузерам */ *background: green; /* Применимо к IE6 и ниже */ }
#hack{
color:green; /* IE 5.01 */
color/**/:blue; /* IE 5.5 */
c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
}
* html .ie6 {color:red;} /* Хак только для IE6 */
IE6 и ниже проигнорирует эти правила:
div>span {...}
div+span {...}
IE min-width & max-width: максимальная и минимальная ширина блока:
#element {
min-width:780px;
max-width:1260px;
width expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
}
Box Model. Хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента:
padding:4em;
border:1em solid red;
width:30em;
width/**/:/**/ 25em;
Min-height хак от Дастина Диаза:
selector {
min-height:500px;
height:auto !important;
height:500px; }
Internet Explorer 7.0 и ниже
Не все хаки для IE7 работают если в начале документа не указать !DOCTYPE.
*+html .style { background: #F00;}
html>body .style {*background: #F00;}
*:first-child+html {} * html {} /* IE 7 и ниже */
*:first-child+html {} /* IE 7 только */
html>body {} /* IE 7 и нормальные браузеры */
html>/**/body {} /* Только нормальные браузеры (не IE 7) */
>body {} /* выбирает элемент body только в IE7 */
html* {} /* выделяет все элементы внутри элемента html. Только для IE7 и ниже. */
//width:100px; - так написаное свойство проигнорируют все браузеры кроме ie 7.0 и меньше
.ie7b {#color:#00FF00;} /* Хак только для IE7,6 */
a:link:visited, a:visited:link В соответствии со стандартами, псевдотеги :link и :visited взаимно исключаемы, то есть :link означает непосещенную ссылку. Тем не менее, IE 7 и ниже проигнорируют эти псевдо-классы, если какой-нибудь другой появится ниже в том же селекторе.
a:link:visited, a:visited:link {} a:link:visited, a:visited:link {} /* выбирает элемент a в IE7 и ниже */
Условные комментарии
Условие может быть таким: IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v.
Для всех версий IE:
<!--[if IE]><link rel="stylesheet" href="css/cssf-ie.css" type="text/css" media="screen" /><![endif]-->
Для 7-й версии:
<!--[if IE 7]><link rel="stylesheet" href="css/cssf-ie7.css" type="text/css" media="screen" /><![endif]-->
Для 5.01, 5.5 и 6.0:
<!--[if lte IE 6]><link rel="stylesheet" href="css/cssf-ie6.css" type="text/css" media="screen" /><![endif]-->
CSS-хаки для браузера Opera
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;} /* только для Opera */
}
html:first-child {} /* только для Opera */
html:first-child .style {
background: #F00; /* только для Opera < 9.5 */
}
Можно создать файл opera.css и подключить его в head секции документа:
<head>
<link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />
</head>
CSS хаки для FireFox:
html:first-child .class { color: #368EF1; } /* для FireFox */
@-moz-document url-prefix(){body { color: #368EF1; }}
CSS-хак для Safari
body:first-of-type #element { color: red; }
CSS-хак для Konqueror
html:not(:nth-child(1)) #element { color: red; }
Для нескольких браузеров:
.class, x:-moz-any-link { color: #368EF1; } /* для FireFox, но так же работает в Internet Explorer 7 */
@media all and (min-width: 0) {.safariOperaChrome {color:#FF00FF;}} /* Хак только для Safari, Opera, Google Chrome*/
@media all and (min-width: 0) {div span { background: #FF0}} /*только для Opera* (так же видит Safari 3 и Google Chrome) /
html:not([lang*=""]):not(:only-child) .ffSafariChrome {color:#990000;} /* Хак только для IE7, FireFox */html:root div {…} /* для Firefox (также видит safari3) */
html:root .ffSafariChrome {color:#660066;} /* Хак только для Safari, FireFox, Google Chrome */
body:first-of-type .operaChromeSafari {color:orange;} /* Хак только для Safari, Opera, Google Chrome */
html>/**/body {} /* Все современные браузеры, кроме IE 7 */
/*\*//*/selector{property:value;}/**/ /* MacIE */
:0047:
>IE min-width & max-width: максимальная и минимальная ширина блока:
Жаль, но у меня не работает, смотрел в ИЕ6.
Есть еще хак, работает для всех ИЕ. $свойство.
Например: $margin:100px
Как сделать, чтобы лист стилей видела только опера?
там ошибочка - перед аргументами пропущено ":"
width[B][COLOR="Green"]:[/COLOR][/B] expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
учитывая, что хак
<head>
<link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />
</head>
не работает (во всяком случае, в опере 9.52), легко можно реализовать условиями на JS примерно так:
if (Opera) document.write('<link rel="stylesheet" href="css/opera.css" type="text/css" />');
else document.write('<link rel="stylesheet" href="css/for_all.css" type="text/css" />');
ясно, значит нафиг)
Нескромный вопрос, а в связи с уже давним выходом FF3 не появилось ли разных CSS селекторов под 2ой и 3ий фф ? =/
Pseudo-elements and pseudo-classes
:-moz-tree-row(hover) [B](New in Firefox 3)[/B]
:-moz-tree-cell-text(hover) [B](New in Firefox 3)[/B]
:-moz-system-metric(windows-default-theme) [B](New in Firefox 3)[/B]
:-moz-system-metric(mac-graphite-theme) [B](New in Firefox 3.1)[/B]
:-moz-system-metric(images-in-menus) [B](New in Firefox 3)[/B]
:-moz-system-metric(scrollbar-start-backward) [B](New in Firefox 3)[/B]
:-moz-system-metric(scrollbar-start-forward) [B](New in Firefox 3)[/B]
:-moz-system-metric(scrollbar-end-backward) [B](New in Firefox 3)[/B]
:-moz-system-metric(scrollbar-end-forward) [B](New in Firefox 3)[/B]
:-moz-system-metric(scrollbar-thumb-proportional) [B](New in Firefox 3)[/B]
:-moz-alt-text [B](New in Firefox 3)[/B]
:-moz-placeholder [B](New in Firefox 3)[/B]
:-moz-broken [B](New in Firefox 3)[/B]
Properties
-moz-border-image [B](New in Firefox 3.1)[/B]
-moz-box-shadow [B](New in Firefox 3.1)[/B]
-moz-window-shadow [B](New in Firefox 3.1)[/B]
CSS3 Columns
-moz-column-rule [B](New in Firefox 3.1)[/B]
-moz-column-rule-width [B](New in Firefox 3.1)[/B]
-moz-column-rule-style [B](New in Firefox 3.1)[/B]
-moz-column-rule-color [B](New in Firefox 3.1)[/B]
CSS transforms
-moz-transform [B](New in Firefox 3.1)[/B]
-moz-transform-origin [B](New in Firefox 3.1)[/B]
-moz-stack-sizing [B](New in Firefox 3.1)[/B]
Values
For all properties accepting color keywords
-moz-mac-chrome-active [B](New in Firefox 3.1)[/B]
-moz-mac-chrome-inactive [B](New in Firefox 3.1)[/B]
-moz-win-communicationstext [B](New in Firefox 3)[/B]
-moz-win-mediatext [B](New in Firefox 3)[/B]
-moz-nativehyperlinktext [B](New in Firefox 3.1)[/B]
width , min-width , max-width
-moz-min-content [B](New in Firefox 3)[/B]
-moz-fit-content [B](New in Firefox 3)[/B]
-moz-max-content [B](New in Firefox 3)[/B]
-moz-available [B](New in Firefox 3)[/B]
-moz-appearance
-moz-win-browsertabbar-toolbox [B](New in Firefox 3)[/B]
-moz-win-communications-toolbox [B](New in Firefox 3)[/B]
-moz-win-media-toolbox [B](New in Firefox 3)[/B]
-moz-mac-unified-toolbar [B](New in Firefox 3.1)[/B]
Подскажите кто-нибудь, как сделать так, чтобы min-width работало в 6 эксплорере
kisenish,
<!--[if lt IE 7]>
<![if gte IE 5.0]>
<style type="text/css">
body {
width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 1000)? "1000px" : "100%");
}
</style>
<![endif]>
<![endif]-->
минимальная ширина для IE6, 5.5, 5.0 будет установлена в 1000px
спасибо большое!!!!
Вот кстати очень хорошая подборка на тему топика – Расширенный сборник CSS-хаков
а кто подскажет как сделать чтобы дивы в мазилле и опере отображались одинаково?
Появилась маленькая просьба в ходе чтения темы!
подписывайте хаки пожалуйста чтобы люди имели ввиду за что какой хак отвечает!
min-width для ie6:
width:expression(document.getElementById('элемент').offsetWidth<981?'980px':'auto');
где вместо 981 и 980 подставляете свои размеры. Первый параметр должен быть обязательно больше второго, хотя бы на 1px, иначе ie6 при resize войдёт в бесконечный цикл.
:1121: Как всегда не успеваю отвечать!!!
Решение для hover ie6
пишем в head
<!--[if IE 6]>
<style>
body{behavior:url(hover.htc)}
</style>
<![endif]-->
далее скопируйте и вставьте в файл hover.htc
<attach for=element event=onmouseover handler=topm>
<attach for=element event=onmouseout handler=verm>
<script>
function topm(){element.className='hover';}
function verm(){element.className='';}
</script>
решение для минимальной ширины или высоты в ie6
вставляем в элемент которому нужно задать минимальную высоту или ширину однопиксельную прозрачную картинку gif, соответсвенно нужной минимальной ширины или высоты.
Плюс-валидный код, минус-не семантично
http://divhack.com/node/3
css хаки для всех браузеров и операционных систем, так же мобильных телефонов и планшетов.
Всё сам проверил, всё работает. Собирал долго.
Особенно порадовало что наконец-то можно для macintosh давать отдельные стили, а то сидишь пилишь под ие, потом приходит директор и говорит, что у него на маке отображается по другому.
[QUOTE=Сергей Шолохов;127392]
Спасибо! хорошая подборка.
Ссылка не рабочая. Возможно перезалить хаки?