各浏览器盒模型的组成结构是一致的,区别只是在"怪异模式"下宽度和高度的计算方式,而“标准模式”下则没有区别。组成结构以宽度为例:总宽度=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
分享到:
相关推荐
因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以...
如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器。 CSS 盒子模型负责处理以下事情: 一...
资源名称:CSS基础知识内容简介:0、基础知识1、CSS概述2、CSS基础语法3、CSS选择器4、CSS主要属性5、CSS核心机制-盒子模型6、CSS重点和难点-定位7、综合示例浏览器模式 当浏览器厂商开始创建于标准兼容的浏览器时...
css样式 多浏览器之间的兼容 盒子模型 按照这个学习绝对没有错
盒子模型、浮动、定位 进阶 CSS 分层架构、CSS3 、响应式、预处理 圆角、动画、个性边框、媒体查询 固定布局、流式布局、响应式布局 适应移动设备的发展 Reset.css样式重置 normalize.css rebot.css Css 选择器 ...
兼容性:弹性盒模型规范是W3C标准化组织于2009年发布的,目前还没有主流浏览器对其进行支持,不过采用Webkit和Mozilla渲染引擎的浏览器都自定义了一套私有属性,用来支持弹性盒模型。 采用Webkit渲染引擎的浏览器...
HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、...
程序员面试刷题的书哪个好 ...Markup ...比如:若不声明DOCTYPE类型,IE6浏览器会将盒子模型解释为IE盒子模型,FireFox等会将其解释为W3C盒子模型 所以,为了页面的正常显示,一定要写文档声明 行内元
HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、...
我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。 可以看到,现代浏览器基本上都支持了,IE10开始也支持了(IE和Safari分别加-ms-和-webkit-前缀即可),移动端的支持情况也比较良好,唯一不支持的平台只有...
前端面试笔记总结,html ,css ,html5 ,css3 ,js,vue基础的面试题,HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。
传统的布局方案主要基于CSS盒子模型,依赖Display、Position、Float等属性。但是它对于一些特殊布局非常不方便,比如水平垂直居中。传统方式实现起来非常繁杂,各种黑科技,比如以下是一种水平垂直居中的实现方式: ...
14.2.3 浏览器的CSS兼容性 14.3 控制CSS改变页面风格 14.3.1 实现结构与表现的分离及其范例 14.3.2 使用JwaScript和CSS实现页面多种风格的实时替换 14.4 总结 第15章 数据存储的脚本化 15.1...
flex全称Flexible Box模型,顾名思义就是灵活的盒子,不过一般都叫弹性盒子,所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性,有了这玩意,妈妈再也不用担心我们的布局。 先简单介绍一下,要使用flex...
传统的布局方式一般都是基于 div 盒子模型,利用 float, position, display 来进行布局。 每个前端开发者对这些布局方式都非常熟悉。对一些特殊的布局来说,使用这些属性并不方便,由此还衍生出各种 hack 方案...
在所有浏览器和平台之间的兼容性。 更少的编码、更少的页数和更快的下载速度。 除了还不能全面支持我们常用的大多数浏器之外,CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的...
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 其他 HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox JavaScript: 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、...
6 一、利于搜索引擎蜘蛛爬行 6 二、易于修改 7 三、减少网页加载时间 7 四、代码精简 7 五、相对表格的嵌套问题 8 六、搜索排名的影响 8 第四节 div+css布局方式 8 第五节 div+css理论概述 9 一、理解CSS盒子模型 9 ...