游客:
注册
|
登录
|
帮助
网友俱乐部
»
网页制作
»
HTML/CSS教程
» Box Model 盒模型bug的一般解决办法
网友生活网
|
网友学堂
如何获得金币?
诚招斑竹
IP归属地查询 PR查询 收录查询 whois查询
免费超短2级域名,your.jpy.cc
火狐浏览器,网上冲浪更快更爽更惬意
注册亚洲交友中心,找个人来同居吧!
7CODE查杀恶意代码,守护您的电脑
‹‹ 上一主题
|
下一主题 ››
投票
交易
悬赏
活动
打印
|
推荐
|
订阅
|
收藏
标题: Box Model 盒模型bug的一般解决办法
lonjew
元帅
UID 73191
精华
1
积分 30615
帖子 14941
威望 3
金币 14931
热心 12
阅读权限 100
注册 2008-1-28
状态 离线
#1
使用道具
发表于 2008-4-25 08:06
资料
个人空间
主页
短消息
加为好友
Box Model 盒模型bug的一般解决办法
我们定义一个最基本的层boxtest:
Example Source Code
#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。
Example Source Code
#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; }
网友
lonjew
签名 - 网友社区
==
[广告]
免费域名(Free Subdomain)
免费空间(Free hosting)
PR查询(Google Pagerank)
投票
交易
悬赏
活动
控制面板首页
编辑个人资料
积分交易
公众用户组
好友列表
个人空间管理
基本概况
流量统计
客户软件
发帖量记录
论坛排行
主题排行
发帖排行
积分排行
在线时间
管理团队
管理统计
当前时区 GMT+8, 现在时间是 2008-7-19 14:57
信产部ICP备案:
京ICP备05066424号
北京市公安局网监备案:1101050648号
Powered by
Discuz!
5.5.0
TOP
清除 Cookies
-
联系我们
-
网友俱乐部
-
Archiver
-
WAP