聊聊css hack
2015-07-06 17:25
1206 查看
什么是CSS hack
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
常用的CSS hack 有三种方式,CSS 内部hack、选择器hack、HTML 头部引用,其中第一种最常用。
一般我们的内部样式是这样写的:
<style type="text/css" > .test{ background-color:green; } </style>
htm代码:
<div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:1px solid #000;"></div>
结果应该是这样的:
在CSS3中常见一些这样的写法:
/*Mozilla内核浏览器:firefox3.5+*/ -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器:Safari and Chrome*/ -webkit-transform: rotate | scale | skew | translate ; /*Opera*/ -o-transform: rotate | scale | skew | translate ; /*IE9*/ -ms-transform: rotate | scale | skew | translate ; /*W3C标准*/ transform: rotate | scale | skew | translate ;
这些都是根据浏览器的内核不同来写的。CSS3目前标准还没有统一,各个浏览器都有自己的表现方式,甚至有的实现,有的未实现,在前面加一些前缀以表示支持某个特定浏览器,这也是CSS 内部hack的基本原理。
目前还有很大部一部分人习惯还是用IE的浏览器,所以这一块市场还是要做的,这就导致了前端的工作量增多了不少。下面说说CSS 内部hack。
CSS 内部hack的语法 是 selector{<hack>?property:value<hack>?;} ,例如:
<style type="text/css" > .test{ * background-color:green; } </style>
在属性前面加个“*”这样的写法只会对IE6、7生效,其它版本IE及现代浏览器会忽略这条指令(没有特殊说明,本文所有hack都是指在声明了DOCTYPE的文档的效果)
<style type="text/css" > .test{ - background-color:green; } </style>
在属性前面有个“-”这样的只有IE6识别。
<style type="text/css" > .test{ _background-color:green; } </style>
在属性前面有个“_”这样的只有IE6识别。
<style> .test{ *+background-color:pink; } </style>
在属性前面有个“*+”这样的只有IE6,IE7能识别。
<style type="text/css" > .test{ background-color:green!important; } </style>
在属性值后面添加“!important”的写法只有IE6不能识别,其它版本IE及现代浏览器都可以识别。
还有\9,\0,\9\0。
<style type="text/css" > .test{ background-color:green\9; } </style>
在属性后面加“\9”的,在所有(IE6,IE7,IE8,IE9,IE10)下都可以显示。其他浏览器都不会显示。
<style type="text/css" > .test{ background-color:green\0; } </style>
在属性后面加“\0”的,在所有(IE8,IE9,IE10)下都可以显示。其他浏览器都不会显示。
<style type="text/css" > .test{ background-color:green\9\0; } </style>
在属性后面加“\9\0”的,在IE9,IE10下都可以显示。其他浏览器都不会显示。
以上是css hack 内部样式。
选择器hack
选择器hack最常见的三种情况分别是:*html,*+html,:root。还有其他的,如:@media screen\9{...}只对IE6/7生效 @media \0screen {body { background: red; }}只对IE8有效 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 @media screen\0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
*html是针对IE6显示的。
*+html是针对IE7显示的。
:root是针对IE9显示的。
如果你想针对IE7显示写,你可以像以下这样:
*+html #ie7test { /* IE7 only*/ color:green; }
如果你想针对IE9显示写,你可以像以下这样写:
:root .test{ background:green; }
HTML头部引用
这是条件注释法,这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下:<!--[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]-->
暂时先写到这里,后续再上。
相关文章推荐
- css笔记14:css文件之间可以相互引用
- css笔记13:display用法
- 使用CSS3制图
- css3学习总结9--CSS3过渡
- css学习笔记一
- css3学习总结8--CSS3 3D转换
- css3学习总结7--CSS3 2D转换
- css笔记12:块元素和行内元素
- css3学习总结6--CSS3字体
- css3学习总结5--CSS3文本效果
- css3学习总结4--CSS3背景
- css3学习总结3--CSS3图像边框
- CSS3 Transitions, Transforms和Animation使用简介与应用展示
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- css笔记11:选择器练习
- css笔记10:多个id选择器/类选择器包含相同部分问题的探讨
- CSS3制作精美的iphone电话图标,不使用图片
- css笔记09:选择器优先级
- css3学习总结2--CSS3圆角边框
- css3学习总结1--CSS3选择器