最新消息:新的一年,启动新的宽屏主题模版,关注更多的web前端!

[css hack]解决IE5.x容器width解析bug

网络技术 amason 2453浏览 0评论

IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin

IE5.X
真实宽度=width-padding-border+margin

方法1:

div.content {
width:430px; //这个是错误的width(对于ie5来说是正确的),所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:400px; //包括IE6/win在内的部分浏览器读到这句,新的数值(400px)覆盖掉了旧的
}

html>body .content { //html>body是CSS2的写法
width:400px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}


方法2:

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

html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}
 


方法3:

div.content {
width:430px; /*所有浏览器识别这个宽度,包括WIN IE5.5 IE5 IE4 NS4 Opera 5*/
w\idth:400px; /*WIN IE5.5 IE5 IE4 NS4 Opera 5不识别,其他的认为这是个正确的值*/
}

html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}


方法4:
 

<!–[if Lte IE5]>
#content {
width:530px
}
<[!endif]–>


这里是一个width:400px;margin:10px;padding:10px; border:10px;的一个盒子,IE5.x Win解析不正常。

IE6盒模型在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model所以,hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。

转载请注明:笑申爱设计|liushen.net » [css hack]解决IE5.x容器width解析bug

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址