CSS hack 方式

css a'ゞ『完美』 3年前 (2016-06-14) 3163次浏览 已收录 1个评论 扫描二维码

什么是 CSS hack

说的官方一点就是各大浏览器对css的“独特”的支持,解析方式。可以在不同浏览器的环境中呈现出不一致的页面展现效果。而对于我们前端开发者来说,为了获得统一的页面效果,就需要针对不同的浏览器或不同版本的浏览器(主要为 IE)写特定的 CSS 样式,我们把这个针对不同的浏览器/不同版本写相应的css的过程,叫做CSS hack!

我就说一说我用到的 css hack

CSS hack 方式一:条件注释法(专门针对 IE,IE10 及以上已经不支持这种判断了)

这种方式是 IE 浏览器专有的 Hack 方式,微软官方推荐使用的 hack 方式。举例如下:

这个注释是 HTML 注释,切记不要写在scriptstyle标签中

这里有我用到的 5 种判断:

1.判断是 IE 浏览器:<!--[if IE]>使用的是 IE 浏览器<![endif]-->
2.判断不是 IE 浏览器:<![if !IE]>使用的不是 IE 浏览器<![endif]>
3.判断 IE 的版本:<!--[if IE 7]>使用的是 IE7<![endif]-->(这个 7 是版本,可变的)
4.判断 IE 大于等于的版本:<!--[if gte IE 7]>使用的是大于等于 IE7 的浏览器<![endif]-->
5.判断 IE 小于等于的版本:<!--[if lte IE 9]>使用的是小于等于 IE9 的浏览器<![endif]-->

CSS hack 方式二:类内属性前缀法

属性前缀法是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀(有些 hack 属性值后面也需要加特殊的字符)

目前我自己测试出来的以下这些:(我的电脑上没有 IE6,我也不考虑 IE6)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>针对 IE 的特殊选择器标识</title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 500px;
				background-color:#000;/*所有浏览器识别,显示黑色*/
			        background-color:red\9; /*自测 IE10 以及以下版本浏览器,显示红色*/
			        *background-color:yellow; /*IE7 及其以下版本浏览器,显示黄色*/
			        +background-color:blue;/*IE6,IE7 识别,显示蓝色*/
			        _background-color:green;/*IE6,IE5.5 识别,显示绿色*/
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

这种方式也可以用来写 js 代码:

		<!--[if IE 9]>
			<script type="text/javascript">
				alert("这是 IE9");
			</script>
		<![endif]-->

hack 的利弊我就不说了,它确实可以解决一些问题,但相对来说却又是不太好的,还是要浏览器统一才是王道!

欢迎交流,有什么意见谢谢指出!

参考资料:

IE 的 css 兼容性
IE 的版本检测注释
用 JS 检测 IE 版本


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明CSS hack 方式
喜欢 (13)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 用media的方式也不错http://www.famanoder.com/bokes/56e78a032e7cca382c10eb07
    花满楼2016-09-25 17:13 回复 Windows 7 | Chrome 45.0.2454.101