Board logo

标题: CSS Hack的工作原理是什么? [打印本页]

作者: divcss5    时间: 2010-10-25 17:12     标题: CSS Hack的工作原理是什么?

CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样,还由于css中的优先级、浏览器读取识别不同符合的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS-这样就制造了CSS HACK。

比如:IE6能识别下划线"_"和星号"*",IE7能识别星号"*",但不能识别下划线"_",而firefox两个都不能认识。
这样我们刚好可以利用CSS读取顺序原理,来达到IE6\IE7\火狐三者读取不同CSS样式
复制内容到剪贴板
代码:
.divcss5{
        float:left; border:1px solid #F00; height:20px;
        width:100px; /* 只有火狐能读取 */
        *width:150px;/* IE7与IE6能读取 */
        _width:200px;/* IE6能读取 */
        }
这样的CSS代码写法,将会实现在IE6\IE7\火狐浏览器之间显示宽度不同。
更细解释就不说了,只需您自己亲自实践,琢磨琢磨,得出结论可以跟贴,支持支持

CSS hack运用时注意:
1、书写顺序
2、认识各浏览器读取与识别符合
3、多实践

补充知识:
什么是CSS Hack?

由于不同的浏览器,比如InternetExplorer6(IE6),InternetExplorer7(IE7),MozillaFirefox(火狐)等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS Hack,也叫写CSS Hack。


更多CSS hack教程http://www.divcss5.com/css-hack/
作者: wuqilong34    时间: 2011-12-16 11:38

谢谢分享 学习了
作者: kicen    时间: 2011-12-23 19:45

width:100px; /* 只有火狐能读取 */    这行IE6,IE7,FF都可以读取并执行。
        *width:150px;/* IE7与IE6能读取 */   这行就只剩IE6和IE7读取了。
        _width:200px;/* IE6能读取 */            这行仅剩IE6能读取了。
执行方式是以样式表最后定义的样式为准的。是这样么?
作者: 1627369620    时间: 2012-3-3 11:43

学习了 支持一下啦
作者: 709787682@qq.co    时间: 2012-3-11 12:18     标题: 回复 4# kicen 的帖子

谁识别谁执行
作者: quechenchao    时间: 2012-3-21 14:22

好像看懂了,呵呵
作者: ping781020    时间: 2012-3-22 11:52

说的比较简单明了!
作者: 北京手绘墙    时间: 2012-5-23 08:56

让您与众不同的黑白手绘墙与手绘墙画笔
作者: 张辽    时间: 2012-5-23 15:37     标题: 支持一下 顶起来

支持一下  顶起来




欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/) Powered by Discuz! 6.1.0