CSS技巧:!important和空格的组合技巧及其他

转载 2007年09月25日 21:06: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该写法的浏览器有幸读到了这一句    
}
     
   
现在回到主题,我们经常看到!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。 

相关文章推荐

大龄程序员的发展方向是做管理还是继续写程序

看到这个帖子,感觉还是有些感触了,想想自己10年后的样子。现在为后面付出了多少,为管理积累了多少经验,为技术做了多少积累。 如果你看不到老程序员,那只是因为他们和你并不在同一个位面上。与人们普遍的观念...

教案:S2-Y2转换课程第1章常见的CSS样式

授课教师:牟勇课时:100分钟 l  本章技能目标n 会创建统一外观的字体文本n 会创建无下划线的超连接样式n 会创建个性化的表格n 会创建个性化的表单l  本章重点nCSS语法规则nCSS常用属性l...
  • mouyong
  • mouyong
  • 2008年04月05日 15:48
  • 1808

Shell实用技巧:快速去除字符串中的空格

(转载)http://www.chncto.com/linux/20349.html 这篇文章主要介绍了Shell实用技巧:快速去除字符串中的空格,本文给出了3种方法,分别讲解了删除行首空格...

Python中空格字符串的处理技巧

字符串处理,是任何语言最常用到的。 其中就经常会碰到,对字符串中的空格处理,比如:去除前后空格,去除全部空格,或者以空格为分隔符来处理。 好在Python中字符串有很多方法,比如lstrip(), r...

word技巧:去空格+目录生成/pdf转换

(来源网络)一、去掉表格和格式     为了版面的整齐,网页文档都是以表格的形式存在的,只是一般情况下表格的颜色被设为无色或表格宽度被设为0,所以我们在网页上看不到表格。另外,网页文档中换行用的都是手...

Django中Mixin和View组合技巧

Mixin和View的职能区分为:Mixin提供数据,View提供模板和渲染。所以一般get_context_data在Mixin中,get(),post(),head()在View中。Mixin和V...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS技巧:!important和空格的组合技巧及其他
举报原因:
原因补充:

(最多只允许输入30个字)