Розовая кайма в Firefox 4 - PullRequest
Новая
       19

Розовая кайма в Firefox 4

0 голосов
/ 19 апреля 2011

У меня есть этот код в моем CSS 

    img.hoverborder {
        border: solid 4px transparent;
        /*Propriété propre à Internet Explorer 6.0 */
        border-color: pink;
        filter: chroma(color=pink);
    }
img.hoverborder:hover {
        border-color: blue;
    }

Это только для IE6, но когда я использую Firefox 4, у меня розовая рамка.Как я могу сделать, чтобы иметь прозрачную границу, когда я использую FireFox 4 ..?Thx.

Ответы [ 3 ]

1 голос
/ 19 апреля 2011

Удалите код IE6-only из вашего CSS и сделайте условный фрагмент в вашем html:

В вашем CSS: 

img.hoverborder {
 border: solid 4px transparent;
 /*Propriété propre à Internet Explorer 6.0 */
 /*border-color: pink;*/
 /*filter: chroma(color=pink);*/
 /* IE6 stuff removed*/
}

В вашей HTML-главе 

<!-- your normal StyleSheet -->
<link type="text/css" rel="stylesheet" href="css/StyleSheet.css"/> 
<!-- overrides for IE 6 -->
<!--[if lte IE 6]>
<style type="text/css">
 img.hoverborder { 
  /*Propriété propre à Internet Explorer 6.0 */
  border-color: pink;
  filter: chroma(color=pink);
 }
</style>
<![endif]-->

В качестве альтернативы вы можете включить в условную часть другую таблицу стилей CSS, например: 

<!-- your normal StyleSheet -->
<link type="text/css" rel="stylesheet" href="css/StyleSheet.css"/> 
<!-- overrides for IE 6 -->
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="css/StyleSheet-IE6.css"/> 
<![endif]-->

Код в <!--[if lte IE 6]> .... <![endif]--> будет использоваться только тогда, когда оператор if равен true.В этом случае, когда браузер имеет значение lte IE 6 (ниже или равно Internet Explorer 6), то есть для IE6 и ниже, поэтому он не будет работать в FF4 и не сделает вашу рамку розовой.Он также не будет розовым в IE7 и более поздних версиях или в любом другом браузере.

0 голосов
/ 19 апреля 2011

Firefox дает вам розовую рамку, потому что вы говорите это следующим образом: 

border-color: pink;

Обычный способ добавить специфичные для IE стили - это использовать условный комментарий и отдельная таблица стилей только для IE.Сначала удалите border-color из основного CSS: 

img.hoverborder {
    border: solid 4px transparent;
    filter: chroma(color=pink);
}

Затем добавьте ie6.css таблицу стилей с этим: 

img.hoverborder {
    /*Propriété propre à Internet Explorer 6.0 */
    border-color: pink;
}

И, наконец, добавьте таблицу стилей IE6 с чем-то вродеэто в вашем HTML: 

<!--[if IE 6]><style type="text/css">@import "ie6.css";</style><![endif]-->
0 голосов
/ 19 апреля 2011 
border-color: rgba(255,0,255,0.5)

Последний параметр для "непрозрачности".

...