CSS Hack写法与IE6下的常见Bug
来源:互联网 发布:相片制作视频软件 编辑:程序博客网 时间:2024/05/17 06:20
总结一下本人在IE6、IE7下使用的CSS Hack写法,以防哪天又遇到需要兼容IE6、7的任务。
一 CSS Hack
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致同样的CSS在不同浏览器的环境中呈现出不一致的页面展现效果。
这时为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,把针对不同的浏览器/不同版本写相应的CSS代码的过程,叫做CSS Hack
CSS Hack的方式主要有如下三种
(引用自:http://blog.csdn.net/freshlover/article/details/12132801)
• 属性前缀法(即类内部Hack):例如 IE6能识别下划线”
_
“和星号”*
“,IE7能识别星号”*
“和加号”+
“,但不能识别下划线”_”,IE6~IE9都认识”\9
“,但firefox前述三个都不能认识。
• 选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{}
,IE7能识别*+html .class{}
或者*:first-child+html .class{}
。
• IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释):<!--[if IE]>IE浏览器显示的内容 <![endif]-->
,针对IE6及以下版本:<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
上图引用自:http://www.duitang.com/static/csshack.html
根据这张图先给出结论:
IE6识别
*
、_
、\9
IE7识别*
、+
、\9
IE8识别\9
、\0
上述几种符号在FireFox上、Chrome都不识别
(IE各版本在标准和怪异模式下可识别的前缀词请参考:http://blog.csdn.net/freshlover/article/details/12132801)
第一和第二种CSS Hack方式都可以使用此结论。
下面我们用例子说明
<style>/*选择器前缀法*/#cshk{ height:20px; }//所有浏览器都识别*html #cshk {height:50px; }//仅IE6识别*+html #cshk {height:80px; }//仅IE7识别/*属性前缀法*/#color{ /*书写顺序为所有浏览器的样式在最前,其次是IE8、IE7,最后是IE6。 */ color:red;//所有浏览器都识别 color:blue\9;//IE9及以下均识别 color:blue\0;//仅IE8识别 +color:orange;//仅IE7识别 _color:green;//仅IE6识别 }</style>
二 IE6下的Bug
inline-block
IE6/IE7下对display:inline-block的支持性不好。
1、inline元素的display属性设置为inline-block时,所有的浏览器都支持;
2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
IE6下块元素如何实现display:inline-block的效果?
有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(…为省略的其他属性内容):
div {display:inline-block;…}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:
div { display:inline-block; _zoom:1;_display:inline;} /*推荐IE6*/div { display:inline-block; *zoom:1;*display:inline;} /*推荐:IE6、7*/
引用自:http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html
margin双倍bug
注意: 该bug只会出现在IE6上。
出现这个bug需要具备三个条件: 1、浏览器为IE6,大于IE6的ie系列版本和火狐等其他浏览器不会出现这个情况。 2、对象设置了float属性,如.ILeft { float: left;} 3、对象设置了margin属性,如.ILeft { float: left; width: 150px; margin-left: 15px}
以上的class=ILeft的层在IE6下浏览就会出现左边距为30px的情况,而不是正常想象中的15px。
解决办法是
给对象的css属性加上 display:inline 即可解决该bug
代码:.ILeft { float: left; width: 150px; margin-left: 15px; display:inline}
再次刷新网页,在IE6下的margin双倍的bug就消失了
参考文档
http://blog.csdn.net/freshlover/article/details/12132801
http://www.duitang.com/static/csshack.html
- CSS Hack写法与IE6下的常见Bug
- IE6 常见的CSS解析Bug以及Hack
- IE6常见CSS解析Bug及hack
- CSS hack原理与常见的hack
- 【CSS hack】常见的前端bug处理
- 针对IE6,IE7,firefox的CSS hack写法
- 全面兼容IE6/IE7/IE8/FF的CSS HACK写法
- 全面兼容ie6,ie7,ie8,ff的CSS HACK写法
- 解決IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法
- 全面兼容ie6,ie7,ie8,ff的CSS HACK写法
- 全面兼容IE6/IE7/IE8/FF的CSS HACK写法
- 全面兼容ie6,ie7,ie8,ff的CSS HACK写法
- CSS HACK收集:在IE6下hack的方法详解
- 各个浏览器下css hack的写法
- css ie6,ie7,ie8 兼容性写法,CSS hack写法
- css ie6,ie7,ie8 兼容性写法,CSS hack写法
- css ie6,ie7,ie8 兼容性写法,CSS hack写法
- IE6 常见CSS BUG修复
- 什么样的产品流程才是好的产品流程?
- OJ--------字符个数统计
- java.net 该包提供实现网络应用与开发的类。
- winpcap demo
- 强制类型转换的内存是怎样的?
- CSS Hack写法与IE6下的常见Bug
- Dagger2原来如此-恍然大悟
- Android+FFmpeg+OpenSL ES音频解码播放
- TX Android电面问题
- 欢迎使用CSDN-markdown编辑器
- 编码练习——Java-7-集合类
- AngularJS自定义指令
- Spring
- hdu2066 一个人的旅行(dijikstra算法)