Css hack总结和解决方法
2012-03-25 20:52
169 查看
一、CSS HACK最佳应用方式
在开发页面的过程中,总会遇到这样那样的不兼容问题,在尽量避免使用一些兼容性很差的元素和样式后,往往还有细节上的不兼容问题,追求完美的前端工程师们就要采用css hack来解决问题了。网上各种css hack资料很多,但是很多是有错误,或者不形象的,今天我来细致形象的总结一下他们,及最万无一失的用法~
所有效果均经过各个浏览器测试
首先 ,将要提及的css hack 有:_,*,\0,\9,\0\9,!important
各个hack的作用:
1、_ :用于IE6
1 background-color:blue; 2 _background-color:red;
复制代码
效果:
2、*和+:用于IE6,IE7
1 background-color:blue; 2 *background-color:red;
复制代码
1 background-color:blue; 2 +background-color:red;
复制代码
效果都为:
3、\0:用于IE8,IE9
1 background-color:blue; 2 background-color:red\0;
复制代码
效果:
没错,在IE6下 无法识别了~~~
4、\9:用于 IE6,IE7,IE8,IE9
1 background-color:blue; 2 background-color:red\9;
复制代码
效果:
5、\9\0:用于IE9
1 background-color:blue; 2 background-color:red\9\0;
复制代码
效果:
没错IE6,又无法识别了~~~~
6、!important:用于所有浏览器--不能算做是hack了,不推荐使用哦
1 div{ 2 background-color:red !important; 3 } 4 #test{ 5 background-color:blue; 6 }
复制代码
效果:
加上!important 可以完全无视css优先级了~~~
二、什么是Haslayout?
顾名思义,它的意思就是 --- has layout,是IE下的特有属性,通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -1”。hasLayout是一种只读属性,有两种状态 true/false,当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。
什么时候表明Haslayout = false?
IE浏览器下的很多bug都是haslayout = false 引起的,所以出现下列问题,就很可能是haslayout跑出来捣鬼了。
1.文字消失,截断
2.边框消失
3.3像素偏差
4.绝对元素定位错误
5.滤镜不生效
6.滚动页面跳动
7其他(欢迎补充哦~)
haslayout = true?
haslayout是一种只读属性,不能人为设置,那该肿么办呢?
首先,IE下 有一些元素是默认带着 haslayout属性的:
<table>
<td>
<body>
<img>
<hr>
<input>
<select>
<textarea>
<button>
<iframe>
<embed>
<object>
<applet>
<marquee>
其他的就只能通过设置css 属性来触发haslayout = true,注意哦,haslayout = true一旦触发是不可逆转的~
触发的css 目前总结有:(欢迎补充哦)
1.position:absolute
2.float:left/right
3.display:inline-block
4.width,height:除“auto”外的任意值
5.zoom:除"normal"外 ...
相关文章推荐
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- PyCharm----中文显示乱码的解决方法总结
- J2EE开发工作中遇到的异常问题及解决方法总结
- PHP中文乱码的常见解决方法总结
- Java Web项目中解决中文乱码方法总结
- APP服务端开发遇到的问题总结(后续再整理解决方法)
- K3问题总结和解决方法
- 数据库高并发解决方法总结
- Css hack总结及其最佳用法,告诉你怎么运用hack,无懈可击的解决各个浏览器的样式兼容
- 解决EditText不显示光标的三种方法(总结)
- 无法下载exe、iso、dll等各种扩展名文件的解决方法 总结
- Windows 7 和 Vista 下使用 Alipay 的解决方法总结 推荐
- 中文乱码问题解决方法总结
- ora-01031:insufficient privileges解决方法总结
- ora-01031:insufficient privileges解决方法总结
- MFC中屏幕刷新闪烁问题解决方法总结
- Android 6.0动态获取权限,根据官方总结的最简单有效解决方法
- Openstack 问题总结之:计算节点上网络访问慢的解决方法
- ASP.NET:Session的缺点总结及解决方法
- 【Android】getActionBar()为null的解决方法总结