问题描述
|
我的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 ..时如何做一个透明边框?
谢谢。解决方法
从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语句为true时使用。在这种情况下,当浏览器是lte IE 6
(低于/等于Internet Explorer 6)时,对于IE6和更低版本,因此在FF4中将无法使用,并且不会使边框变成粉红色。在IE7和更高版本中,或者在任何其他浏览器中,它都不是粉红色的。,border-color: rgba(255,255,0.5)
最后一个参数用于\“ opacity \”。,Firefox会给您粉红色的边框,因为您是这样告诉它的:
border-color: pink;
添加特定于IE的样式的通常方法是仅针对IE使用条件注释和单独的样式表。首先从您的主要CSS中删除ѭ8:
img.hoverborder {
border: solid 4px transparent;
filter: chroma(color=pink);
}
然后添加一个ie6.css
样式表:
img.hoverborder {
/*Propriété propre à Internet Explorer 6.0 */
border-color: pink;
}
最后,在HTML中添加如下所示的IE6样式表:
<!--[if IE 6]><style type=\"text/css\">@import \"ie6.css\";</style><![endif]-->