井井客

搜索

IE各浏览器hack

看了一些css关于浏览器hack的文章,略有受益,而因为谷歌、FF、safari等浏览效果大部分相差不多,所以还未整理实验,这次暂时列出了css样式在IE各浏览器hack,以应付大部分的兼容需求。

IE各浏览器hack

首页现在Ie6浏览器也越来越淡出我们的视野了,百度搜索"2016年浏览器市场份额",拿了搜狐的新闻中的图片来了解一下~(感觉这是前端们的福音)看下图。

IE各浏览器hack-市场份额

然后下面贴一下IE hack的代码,内容还是比较简单的。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE各浏览器hack</title>
<style type="text/css" media="all">
body { font-size:14px;}
ol { line-height:28px; padding-left:50px;}
div { width:500px; height:200px; color:#fff; line-height:200px; text-align:center;}
.example {
	background:#07e;			/* 通用浏览器背景色 */
	background:#963\0;			/* IE8-IE10 hack */
	background:#ff0\0/;			/* IE8 only */
	*background:#f60; 			/* IE7及以下 */
	_background:#390;			/* IE5-IE6 hack */
}
</style>
</head>
<body>
<div class="example">注意我的背景颜色</div>
<ol>
    <li>IE6, 背景色为: <span style="background:#390">绿色(#390)</span></li>
    <li>IE7, 背景色为: <span style="background:#f60">橘色(#f60)</span></li>
    <li>IE8, 背景色为: <span style="background:#ff0">黄色(#ff0)</span></li>
    <li>IE9+, 背景色为: <span style="background:#963">咖啡色(#963)</span></li>
    <li>其它浏览器,背景色为: <span style="background:#07e">蓝色(#07e)</span></li>
</ol>
</body>
</html>

另外贴一下Ie下的几个hack,用的时候再验证一下:

"\9″	在IE6/IE7/IE8/IE9/IE10下生效
"\0"	在 IE8/IE9/IE10下生效
"\9\0"	在IE9/IE10下生效

注意,因为css样式是可覆盖的,浏览器hack最好是从上向下(范围从大向小),如一开始定义的一个通用浏览器背景色,然后向下,到"*"其实是在IE7浏览器以下会支持的写法,最后再到"_"即缩小到IE6浏览器下支持。

扩展链接(本文来源):http://www.fantxi.com/demo/html/browser_detector.html

参考的文章比较老了,有些东西还需要再测试测试,仅供思考~

文章TAG:css

作者:井井客整理来源:互联网
本文标题:IE各浏览器hack
本文链接:/c/1885.html

上一篇:JQ日期倒计时距离还有多少天
下一篇:比较完整的正则表达式匹配网址URL、域名、路径

文章分类

相关阅读

随便看看