标签：属性 html ott 意思 样式表 边框 默认 图片 方法
html兼容性问题:
1.ie6双倍值
（1）.什么情况会出现双倍边的bug
a.当同时满足出现float：left和margin-left值时候在ie下解析为双倍效果，
例如margin_1.html
b.当同时满足出现float：right和margin-right值时候在ie下解析为双倍效果
，例如margin_1.html
c.同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的
浮动元素则不会
（2）解决办法
a.只需要给浮动元素加上display:inline;
b._margin-left或_margin-right，其值是正常显示值的一半，这个样式只有
IE6可以解释
c.另外就是这两个样式一定要放在正常样式margin-left和margin-right的下边
，因为浏览器解释样式表是从上至下的，如果两个样式有冲突，以下边的样式为准来显示
2.图片三像素
（1）.为什么会出现2像素的bug？问题的原因就是img属于inline元素, inline元素
一般都是文字, 而英文的小写字母y和g底部比别人多出来一段, 因此不管inline元素中有什
么, 都会默认为y和g留出底部一段距离,
（2）解决办法
a.img {display: block;}这样img就不是inline元素了, 不用像文字那样需
要留底（ie6不可以）
b.box {font-size: 0;}把img的父元素设置字体大小为0, 字体不占位了, 因
此也不会留底, 同理还有line-height: 0;
c.img {vertical-align: middle;}这是最佳的解决方法, 或者vertical-
align: bottom;（ vertical-align: middle;在ie6还会多出一像素）
3.优先性 用了important提升优先级（或看成强制重定义）
4.margin值的合并问题
（1）什么叫margin折叠
a.在这个说明中，“collapsing margins”（折叠margin）的意思是：2个或以
上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容padding
区域、border边框或使用清除分离方法）结合表示为一个单独的margin。在css2.1中，水平
的margin不会被折叠。
（2）会出现的情况
a.在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠
b.相邻的盒模型中，如果其中的一个是浮动的（floated），垂直margin不会被
折叠
c.毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、
Padding或Border分隔
（3）解决方法
a.给父级转行成行块级元素，或者给给父级一个padding-top值或者border-
top值
标签：属性 html ott 意思 样式表 边框 默认 图片 方法
原文地址：http://www.cnblogs.com/xy2c/p/7497115.html
