最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Box Model 盒模型bug的一般解决办法
时间：2022-07-02 12:41:58 编辑：袖梨 来源：一聚教程网
我们定义一个最基本的层boxtest：
| 代码如下 | 复制代码 |
| #boxtest{ border:20px solid #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; }
相关文章
- 龙魂旅人阵容怎么搭配-龙魂旅人阵容搭配推荐 07-06
- 绝区零自选五星选哪个-绝区零自选五星选择攻略 07-06
- 比特币和以太坊上涨至小型代币启动_近日表现优异 07-06
- 龙魂旅人角色强度排名-龙魂旅人角色推荐 07-06
- 七日世界房子设计图有哪些-七日世界房子设计图一览 07-06
- 龙魂旅人兑换码在哪输入-龙魂旅人兑换码最新版2025 07-06