找回密码
 注册

QQ登录

只需一步,快速开始

查看: 17705|回复: 34

[教程] !important和(空格)/**/:的组合技巧及其他

[复制链接]
发表于 2005-4-11 15:58:00 | 显示全部楼层 |阅读模式
先温习一下对于IE的box-model的破解
IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本,这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服

http://www.tantek.com/CSS/Examples/boxmodelhack.html
IE5.X/win对box-model的解析是一样的,他们认为width包括了边框(border)和补白(padding),幸运的是这个情况在IE6中有了好转
但是IE6在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model
所以,tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作

div.content {
        width:400px;                                //这个是错误的width,所有浏览器都读到了
        voice-family: "\"}\"";                        //IE5.X/win忽略了"\"}\""后的内容
        voice-family:inherit;
        width:300px;                        //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
}
html>body .content {                //html>body是CSS2的写法
        width:300px;                                //支持CSS2该写法的浏览器有幸读到了这一句
}

[[i] 本帖最后由 blankzheng 于 2007-4-4 08:43 编辑 ]

评分

参与人数 1威望 +3 收起 理由
经典论坛大妈 + 3 历史打分

查看全部评分

 楼主| 发表于 2005-4-11 16:10:00 | 显示全部楼层
现在回到主题,我们经常看到!important和(空格)/**/:组合在一起使用,这个写法有什么奥妙呢?

看刚才那个写法,我这里可以提供另一种写法也能达到这样的效果

div.content {
        width:300px !important;                //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
        width(空格)/**/:400px;                //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
}
html>body .content {                //html>body是CSS2的写法
        width:300px;                                //支持CSS2该写法的浏览器有幸读到了这一句
}

同样,这个方法仍必须依靠正确的文档类型声明才能够正常工作,原因在前面已经说过。

文档类型声明就像一个开关,打开向后兼容的未来,而错误使用的话,就是一个Pandora box
回复 支持 反对

使用道具 举报

发表于 2005-4-11 16:12:00 | 显示全部楼层
期待更多精彩内容
回复 支持 反对

使用道具 举报

 楼主| 发表于 2005-4-11 16:32:00 | 显示全部楼层
禾火木风在上个帖子中说
期待更多精彩内容

讲完了,不知道有没有讲错的地方,请多指教!
回复 支持 反对

使用道具 举报

发表于 2005-4-11 16:37:00 | 显示全部楼层
呵呵
精彩啊
那么快就完啦
再讲讲别的啊
回复 支持 反对

使用道具 举报

发表于 2005-4-11 23:03:00 | 显示全部楼层
又学了一点,谢谢!
回复 支持 反对

使用道具 举报

发表于 2005-4-12 01:47:00 | 显示全部楼层
很有教学经验:)
回复 支持 反对

使用道具 举报

发表于 2005-4-12 17:19:00 | 显示全部楼层
不错不错~
我转载了
回复 支持 反对

使用道具 举报

发表于 2005-4-12 18:32:00 | 显示全部楼层
div.content {
    width:300px !important;        //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
    width(空格)/**/:400px;        //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
}

这个技巧比较爽,用Tantak的话好像IE5会不认voice后面的全部规则,每次要把这些规则放到后面太不爽了:)
再谢一次!
回复 支持 反对

使用道具 举报

发表于 2005-4-30 17:01:00 | 显示全部楼层
我宁愿放弃这种取巧的写法,也要弄得正规一点。
回复 支持 反对

使用道具 举报

发表于 2005-12-16 15:29:00 | 显示全部楼层
diekiss在上个帖子中说
我宁愿放弃这种取巧的写法,也要弄得正规一点。


正规的代价就是网页在老浏览器不可用
回复 支持 反对

使用道具 举报

发表于 2005-12-16 15:30:00 | 显示全部楼层
问一下\作用是不是也是一样?

  1. #primaryNav {
  2.         position: absolute;
  3.         left: 0;
  4.         top: 70px;
  5.         width: 13em;
  6.         w\idth: 11em;
  7.         padding: 1em;
  8. }
复制代码
回复 支持 反对

使用道具 举报

发表于 2005-12-16 16:11:00 | 显示全部楼层
Frully在上个帖子中说
问一下\作用是不是也是一样?

  1. #primaryNav {
  2.         position: absolute;
  3.         left: 0;
  4.         top: 70px;
  5.         width: 13em;
  6.         w\idth: 11em;
  7.         padding: 1em;
  8. }
复制代码

作用是一样的,这种写法最早好象是htmldog推出的.
回复 支持 反对

使用道具 举报

发表于 2005-12-16 16:15:00 | 显示全部楼层
恩  就是在htmldog看到的
那里也用     voice-family: "\"}\"";   voice-family:inherit;
把我给弄糊涂了

这种方法更简洁吧? 对哪些浏览器有效?使用这种方法有什么要注意的吗?
w\idth: 11em;后面的padding: 1em;会不会跳过?
回复 支持 反对

使用道具 举报

发表于 2005-12-16 16:16:00 | 显示全部楼层
好像问了一个啥问题
padding: 1em; IE不能读取就没意义了...
回复 支持 反对

使用道具 举报

发表于 2005-12-16 16:24:00 | 显示全部楼层
ie5.x读前个数据,其他读后个,很好用的,我从2月以来一直是用这种方法的.
回复 支持 反对

使用道具 举报

发表于 2005-12-16 16:27:00 | 显示全部楼层
谢谢解答~
回复 支持 反对

使用道具 举报

发表于 2005-12-16 17:37:00 | 显示全部楼层
XHTML和CSS过滤用法参考
http://www.rexsong.com/blog/article.asp?id=149
回复 支持 反对

使用道具 举报

发表于 2006-2-17 09:40:00 | 显示全部楼层
新人问句:我们到底要300还是要400?
回复 支持 反对

使用道具 举报

发表于 2006-6-29 10:53:00 | 显示全部楼层
div.content {
        width:300px !important;                //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
        width(空格)/**/:400px;                //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
}

http://www.w3cn.org/article/tips/2004/91.html   阿捷不是说了吗? IE一直都不支持这个语法都不支持!important  为何上面IE6还以为是300px????
回复 支持 反对

使用道具 举报

发表于 2006-7-18 15:19:07 | 显示全部楼层

我这样写岂不更爽??

div.content {
    width:400px; \*IE6以下读的*\
    w\idth:300px; \*IE6+FF都能读*\
}
回复 支持 反对

使用道具 举报

发表于 2006-7-18 22:46:14 | 显示全部楼层
网上的资料都在说,IE不支持 !important  。
不过我早就发现,其实IE6也支持,而且有时先前定义的属性,因为需要重新修改(比如开始时a的color设定为红色,后来改为蓝色),如果不用!important  还不能正确修改呢。

另外,正规一些的写法:

  1.     width:300px !important;     //给IE以外的浏览器用
  2.     width:350px;      //IE忽略前一个300的设定,使用350  注意,不是上面提到的 width(空格)/**/
复制代码

在应付浏览器间的兼容时也起作用。

真的不知道,IE6到底支不支持 !important,只有设定之后测试。
回复 支持 反对

使用道具 举报

发表于 2006-7-19 12:26:22 | 显示全部楼层
不错的帖子,不过我想问一下楼主,应该加哪种文档类型(DOCTYPE)声明才可以呢?这里请说的具体些。
回复 支持 反对

使用道具 举报

发表于 2006-7-21 22:35:07 | 显示全部楼层
本人刚学CSS+DIV布局,我个人的目标是网页支持 IE6+FF+Opera就可以了,没必要再支持IE5-。当然了,这也要根据行业来说,我是做网络方面产品的,假如客户还是用使用IE4,99%的确定不是我的潜在客户。所以我的观点是支持IE6+FF+Opera 即可。

在技巧方面,我暂时只用到!important,目前来说确实够用了,CSS HACK我认为尽量不用、少用,否则离标准越来越远。

IE6 实际上是支持 !important ,也能够读懂这一句,但IE理解和FF不一样,代码说明吧。因初学,如有错误,敬请指教,谢谢。

#test {width:300px;width:400px !important ;} 这句IE和FF显示的宽度都是 400PX

#test {width:300px !important ;width:400px;} 这句FF:300px IE: 400px

所以,使用!important 时,把含有!important 放到前面

另外,在这几天的实践中,发现IE和FF对盒模型的解释也不一样,也作代码解决说明吧。

#test { width: 650px !important;width: 648px;padding-left:2px;background:#fff; }

test 显示的宽带是 650px

IE Box的总宽度是: width+padding+border+margin宽度总和
FF Box的总宽度就是 width的宽度,padding+border+margin的宽度在含在width内。
回复 支持 反对

使用道具 举报

发表于 2006-7-22 11:53:27 | 显示全部楼层
不错很好!
回复 支持 反对

使用道具 举报

发表于 2006-7-22 16:29:54 | 显示全部楼层
不知道我说的对不对,
我认为所谓的hack应该很大程度上是让两种不同的浏览器表现一致,而同一种浏览是很少会说表现不一样的,
例如,width:300px;是不会说在IE5它表现为298px;而在IE6中表现为300px;
在同一种浏览器中他更多存在问题应该是对这个样式是否支持,如在IE5中支持不支持E:first的写法,如果不支持又应该用什么方法来达到这种表现的形式,
个人观点而已,切莫人身攻击。
回复 支持 反对

使用道具 举报

发表于 2006-7-22 22:35:37 | 显示全部楼层
啥时候才能写CSS不用HACK?哎,W3C那帮家伙,弄来弄去,还是一团乱哦。
回复 支持 反对

使用道具 举报

发表于 2006-7-23 20:04:29 | 显示全部楼层
原帖由 [i]112183883 于 2006-7-22 22:35 发表
啥时候才能写CSS不用HACK?哎,W3C那帮家伙,弄来弄去,还是一团乱哦。

你应该说是MS那帮家伙。:D
回复 支持 反对

使用道具 举报

发表于 2006-8-10 14:40:11 | 显示全部楼层

!important的意义

.width1 {width:100px !important;}
.width1 {width:200px;}

!important是说这个设置有优先级,IE遇到!important不会出错只是忽略他的功能,如果后面又设置了width,会以最后设置的width为准,如果后面再没有其它设置,则会用这个值。而其它浏览器,则认这个important,因为有优先级的关系,所以始终以前面设置的width为准。

[[i] 本帖最后由 emmaemail 于 2006-8-10 14:57 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-9-8 15:43:20 | 显示全部楼层
好贴,正需要!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-5 18:46 , Processed in 0.079506 second(s), 14 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表