兼容各浏览器盒子模型

hyj1254

浏览: 340099 次
性别:
来自: 北京

最近访客更多访客>>

jin361612388

古月小白恋红尘

洗碗小小笑

金元宝

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript/CSS

各浏览器盒模型的组成结构是一致的，区别只是在"怪异模式"下宽度和高度的计算方式，而“标准模式”下则没有区别。组成结构以宽度为例：总宽度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight。页面在“怪异模式”下，css中为元素的width和height设置的值在标准浏览器和ie系列(ie9除外)里的代表的含义是不同的。
因而解决兼容型为题最简洁和值得推荐的方式是：下述的第一条。
一、将页面设为“标准模式”。
添加对应的dtd标识，如：

<!DOCTYPE html>

经测试，ie6/7/8/9,ff,chrome,opera均表现一致：

<!DOCTYPE html>
<html>
<head>
<style>
#box {width:100px;padding:0 10px;border:20px solid blue;margin:70px;}
</style>
<script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
</head>
<body>
<div id="box">
</div>
<script>
var box = $('#box');
var boxWidth=box[0].offsetWidth;//包括补白、边框和内容宽度
alert(boxWidth+":"+box.width());//专指内容的宽度
</script>
</body>
</html>

注意：offsetWidth=borderLeft+paddingLeft+contentWidth+paddingRight+borderRight。
此时alert的值是160:100。即，各浏览器均认为css中的width就是100px即内容的宽度,和padding+border最终相加结果是：160px。
如果把doctype去掉，即进入“怪异模式”，此时，ie6/7/8的值均为100:40，证明它们认为css中width指的和offsetWidth是同一个值，除了内容的宽度外还都包含补白和边框，而内容的宽度则被压缩为40。而ie9,ff,chrome,opera这样的标准浏览器则依然是160:100。
二、使用hack或者在外面套上一层wrapper。
前提是页面处于“怪异模式”，“标准模式”不存在兼容性问题。
1、hack
依然使用上例：假设内容的宽度必须固定为100px。

#box {
width:100px !important;
width:160px;
padding:0 10px;border:20px solid blue;margin:70px;
}

2、wrapper

#box {
width:100px;
margin:70px;
float:left;
}
.wrapper {
padding:0 10px;border:20px solid blue;
}

<div class="wrapper">
<div id="box"></div>
<div style="clear:both"></div>
</div>

总结：使用“标准模式”即可实现兼容，不兼容只发生在“怪异模式”下。而且正常的页面基本上都选择前者，如果选择后者，麻烦不止于此，一些css技巧也将失灵，如将div居中：

div {margin:0 auto;}

查询类似问题可以访问网址http://www.quirksmode.org/css/contents.html

0
顶

0
踩

分享到：

VMWare虚拟机上网方式总结 | 获取鼠标相对位置

2011-09-24 23:36
浏览 5793
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论