css如何针对IE9单独设置宽度?
<head>
</head>
<body>
<style>
#test{border:1px solid red;
width:100px;
}
</style>
<div id="test" class=test >sssssssssss</div>
</body>
</html> 展开
可以使用CSS hack来对IE9 进行单独设置。下面我们通过实例来看看IE系列和一下流行的浏览器hack如何写。
针对不同的浏览器写不同的CSS code的过程,就是CSS hack。
#test{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){
#test {background-color:black\0;}
} /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;}
} /*chrome and safari*/
答:可以使用CSS hack。在head标签里面写入
<head>
<!--[if IE 9]>
<style>
div{ width:90px; }
</style>
<![endif]-->
</head>
《CSS hack 知识普及》
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
只在IE下生效:
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效:
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效:
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效:
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效:
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
2. <!–[if IE]> 所有的IE可识别 <![endif]–>
3. <!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–>
4. <!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–>
5. <!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–>
6. <!–[if IE 6]> 仅IE6可识别 <![endif]–>
7. <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
8. <!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
9. <!–[if IE 7]> 仅IE7可识别 <![endif]–>
10. <!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
11. <!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>
在css里使用如下标识符可以被ie识别而采用
其他浏览器会忽略if ie