展会信息港展会大全

Box Model 盒模型bug的一般解决办法
来源:互联网   发布日期:2016-03-25 16:35:43   浏览:3500次  

导读:我们定义一个最基本的层boxtest: 代码如下 复制代码 #boxtest{ border:20px solid #60A179; padding: 30px; background : #ffc; width : 400px; } 标准情况下,这个盒的宽度是:20+30+300+30+20=400px。 但是在IE5.0浏览器中,对盒模型的宽度解释有个bug,它...

我们定义一个最基本的层boxtest:

代码如下

复制代码

#boxtest{

border:20pxsolid #60A179;

padding: 30px;

background :#ffc;

width : 400px;

}

标准情况下,这个盒的宽度是:20+30+300+30+20=400px。

但是在IE5.0浏览器中,对盒模型的宽度解释有个bug,它认为300 px是整个盒的总宽度,内容的宽度变成:300-20-30-20-30=200px。

为了弥补这个bug,采用一个技巧:即增加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读,认为宽就是400px,但而其他符合标准的浏览器会继续阅读,并执行第二个真实值300px。

代码如下

复制代码

#boxtest{

border:20px solid #60A179;;

padding:30px;

background: #ffc;

width :400px;

voice-family :""}"";

voice-family :inherit;

width :300px;

}

同样,在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值,有更简单的办法解决这个问题: html>body .content { width :300; }

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港