CSS中怎么写能让IE8显示出来 火狐不显示出来

html-css015

CSS中怎么写能让IE8显示出来 火狐不显示出来,第1张

尊敬的用户,您好!很高兴为您答疑。

以color属性为例,

color:#ff0000/*一般属性ff*/

color:#ff0000\9/*仅针对ie8有效*/

*color:#ff0000/*仅针对ie7有效*/

_color:#ff0000/*仅针对ie6有效*/

希望我的回答对您有所帮助,如有疑问,欢迎继续咨询我们。

为了实现ridio 选中ridio 样子自动变用了input:checked + .ridio {background-image:url(../img/radio1.png)}实现,但是后来发现:checked 选择器ie8以下不能识别,最近从一个大神那发现了了一个可以使ie8版本识别css3伪类和属性选择器selectivizr,地址为http://www.zhangxinxu.com/wordpress/2010/09/selectivizr-%E8%AE%A9ie6ie7ie8%E6%94%AF%E6%8C%81css3%E4%BC%AA%E7%B1%BB%E5%92%8C%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8/

实际使用时发现,ridio 选中样式不会随着点击选中而改变样子,看起来好像就没有什么作用。后来发现,原来在ie8下我的Input隐藏了display:none这种写法好像ie8默认不能点击,只能用filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)来透明隐藏住按钮,但是input所占的空间还是存在的,这样看起来比较丑,但是目前也没啥比较好的解决方法,只想这个样式在ie8以下使用就好,ie9以上还是用display:none来实现。

问题来了,之前是:root来区分ie9的hack的,结果selectivizr支持了:root属性,只能换了另一种写法

[html] view plain copy

<span style="font-size:14px">.hide{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)}

@media all and (min-width:0) {

.hide{display:none}

}

</span>

各浏览器兼容性css写法

/* 针对Chrome谷歌浏览器内核支持的CSS样式 */

@media screen and (-webkit-min-device-pixel-ratio:0) {

样式 /* 例如 .font1 {color:red} */

}

针对Firefox浏览器的内核CSS写法:

@-moz-document url-prefix(){

样式 /* 例如 .font1 {color:red} */

}

如果只让ie6看见用*html .head{color:#000}

如果只让ie7看见用*+html .head{color:#000}

如果只让ff看见用:root body .head{color:#000}

如果只让ff、IE8看见用html>/**/body .head{color:#000}

如果只是不让ie6看见用html>body .head{color:#000} 即对IE 6无效

如果只是不让ff、IE8看见用*body .head{color:#000}即对ff、IE8无效

针对具体属性

如果只让ie6看见用_

.head{_color:#000}

如果只让ie7看见用+与_结合的方法:

.head{+color:#f00!_color:#000}

IE8正式版hack

\9″ 例:”margin:0px auto\9”.这里的”\9″可以区别所有IE8和FireFox.

“*” IE6、IE7可以识别.IE8、FireFox不能.

“_” IE6可以识别”_”,IE7、IE8、FireFox不能.

如:

.a { color:#f00color:#f60\9 +color:#00FF00 _color:#0000FF}

从左到右分别对应 FireFoxsIE8 IE7 IE6

还有写css样式一定要记住顺序:

以下为引用的内容:

#1 { color: #333} /* Moz */

* html #1 { color: #666} /* IE6 */

*+html #1 { color: #999} /* IE7 */