- 浏览: 45602 次
- 性别:
- 来自: 北京
文章分类
最新评论
浏览器模式:影响的是浏览器的版本及IE的条件注释;
文档模式下(DocType):影响的是浏览器的兼容性(Hack)以及模式(标准模式,怪异模式)
DOCTYPE MODE
XHML + DOCTYPE | 标准模式 |
HTML 4.01 + strict DTD | 标准模式 |
HTML 4.01 + URL和transitional DTD/Frameset DTD | 标准模式 |
HTML 4.01 +只包含transitional DTD//Frameset DTD | 怪异模式 |
DOCTYPE不存在 | 怪异模式 |
IE6第一行中有:<?xml version="1.0" encoding="utf-8"?>时,IE6:怪异模式
在IE7中,一个xml声明并不会再导致进入怪异模式,但是这并不表示在DOCTYPE之前加入其他东西也能不触发。比如html注释。
<?xml version="1.0" encoding="utf-8"?> <!-- ... and keep IE7 in quirks mode --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
标准盒模型
IE盒模型
怪异模式下,在 IE 浏览器中显示“IE盒子模型”,其他浏览器中显示“标准 W3C 盒子模型”。在标准模式下,所有浏览器都显示“标准 W3C 盒子模型”。所以为了让网页能兼容各个浏览器,让我们用标准 W3C 盒子模型 。
在Quirks(怪异模式)后IE浏览器 盒子模型计算方法是:将边框(border)和内补丁(padding)的数值归入盒模型的宽度(width)及高度(height)中,总宽和总高应该为:
盒模型的总宽度 = magin-left + width +mrgin-right
盒模型的总高度 = margin-top +height +margin-bottom
标准模式下,计算应该是:
盒模型的总宽度 = margin-left + border-left + padding-left + width +padding -rigt +border-right +margin-right
盒模型的总高度 = margin-top + border-top + padding-top + width +padding -bottom + border-bottom + margin-bottom
这里提供一个js判断 当前浏览器正在以何种方式解析 的一个 document对象
document对象有个属性compatMode ,它有两个值:
alert(document.compatMode );
BackCompat 对应 [quirks mode]怪异
CSS1Compat 对应[strict mode]严格模式/正常模式
以下内容转自:http://www.cnblogs.com/uedqd/archive/2010/12/25/1916554.html
盒模型的概念就不多说了,说说怪异模式下盒模型的问题:
怪异模式下声明的宽度和高度包含 padding和border在内。因此元素显示出来要比其他浏览器里小。
我一直认为写生先写意,从“意”的角度来讲,盒子模型在IE和其他浏览器中的差异是这个意思(注意一下画作的点睛之笔--夺命诱惑之梦露式美人痣):
从写实的角度来见,请看具体的例子:
<div style="border:20px
solid red; padding:20px; background-color: green; width: 100px;
height:100px;">
<div style="width:100%;height:100%;
background-color:yellow;"></div>
</div>
截图对比:
可见,定义好’width’,’height’,’padding’ 还有 ’border’的元素,在IE的兼容性模式里,要比其他浏览器中小。差距还真够大的,常言道:差之毫厘,谬以千里,这何止是毫厘啊,有几公里那么多!!
这个 bug,会引起布局上的问题,导致布局混乱。严重之极。稍有正义感的江湖人士,无不欲除之而后快,但何从下手呢?常言又到,斩草须除根,所以,还须先找到其错误的根源才好。
其实,IE的盒模型bug的实质,是 ”width” 和 “height” 的作用位置的问题。
发表评论
-
iconfont font_1
2013-12-26 13:43 0http://ux.etao.com/posts/401 ... -
iconfont font
2013-12-26 13:41 0图形设计生成总结 http://www.yixieshi ... -
IE6,IE7绝对定位元素神秘消失或被遮挡的解决
2013-12-04 16:36 0IE6,IE7绝对定位元素 ... -
css float文字的显示问题(兼容性)
2013-11-22 17:55 0如果float容器未定义宽度,ff下内容会尽可能的撑 ... -
white-space:nowrap
2013-11-19 09:40 0white-space:nowrap应用 注意:f ... -
css3 target
2013-11-17 10:57 0转自:http://www.qianduan.net/cs ... -
css bugs
2013-10-24 10:36 0HR { clear: both; backgro ... -
使用CSS3的appearance属性改变元素的外观
2013-07-30 14:19 0转:http://www.w3cplus.com/css3/ ... -
css 技巧
2013-07-18 09:30 0使用background设置图片来替换文本: 每个网站都 ... -
CSS3 Word-wrap word-break white-space(待整理)
2013-06-15 22:45 0http://www.w3cplus.com/content ... -
浏览器兼容问题
2013-04-27 18:31 0兼容性: 1)浮动双边距:display:inline ... -
CSS竖直对齐vertical-align属性详解
2013-04-27 13:12 0转自:http://zhengguoting.blog. ... -
IE6 fixed min-height max-height
2013-04-08 22:03 0Fixed 1.expression 例子 ... -
ie6 bugs-2
2013-04-08 17:38 0ie6 overflow-y:auto BUG修复 h ... -
中间div滚动
2013-04-08 15:13 0<!DOCTYPE html PUBLIC &quo ... -
font-size:0对取消img的右侧和下侧margin
2013-04-04 21:21 0在做人人面试题时,发现默认情况下img并排会出现右边 ... -
工作总结
2013-02-25 13:57 0hr { width:100%; backgr ... -
IE6 BUG汇总
2013-02-24 08:48 0IE6 BUG汇总http://hi.baidu.com ... -
hasLayout
2013-02-23 17:11 0什么是hasLayout?http://ne ... -
各浏览器对常用行内替换元素的 'baseline' 位置理解不同
2013-02-17 14:44 0转自:http://www.w3help.org/ ...
相关推荐
css盒模型css盒模型css盒模型css盒模型css盒模型
IE盒子模型和标准W3C盒子模型.盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。
CSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rar
CSS盒模型的应用知识介绍,基础的CSS盒模型教学
这是一个CSS的PPT CSS 盒模型,主要介绍CSS中的盒模型
介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别,他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
详细分析了css盒模型 希望对大家有帮助
CSS盒子模型结构
H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子
CSS+盒模型,css盒模型面试题,HTML源码
简述介绍css盒模型,从基础的一些知识解释了盒模型,以及他的一些使用方法。 来自新人小白的粗略文章,希望大家多多包涵!
盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距
这是盒子模型的思维导图,便于理解CSS这一核心,通过思维导图我们可以成体系的理解盒子模型,便于学习和记忆
css之盒子模型。
盒子模型概述;认识盒子模型;认识盒子模型;认识盒子模型;认识盒子模型;div标记;div标记;div标记;div标记;盒子的大小;盒子的大小;盒子的大小;总结;;THANKS
CSS盒子模型教程PPT课件.pptx
CSS+DIV-盒子模型示例.zip
CSS盒子模型图片,和大家分享一下,里面详细的介绍了CSS的盒子模型
css盒模型难点
CSS盒子模型教程学习教案.pptx