css - Firefox 4 中的粉色边框

Question

我的 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.. 时，我该怎么做才能有透明边框？谢谢。

Answer 1

从您的 CSS 中删除仅适用于 IE6 的代码并在您的 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 语句为真时使用。在这种情况下，浏览器是 lte IE 6 (低于/等于 Internet Explorer 6)，因此对于 IE6 及以下版本，因此它不会在 FF4 中工作并且不会使您的边框变成粉红色。它在 IE7 及更高版本或任何其他浏览器中都不会是粉红色。