今天重点介绍一下CSS中所涉及到的兼容问题，学习CSS也有一段时间了，一直在想去写些什么东西，也许是自己太懒，也许是根本不知道从何入手，终于下定了决心，2014，马年了，还是勤奋点，权当做下笔记吧，方便以后查看。
一、样式属性引发的问题
1 margin
1.1 块属性元素的上下margin会产生叠压
1.2 内嵌元素不支持上下的margin、padding
（以上两点没啥好说的，各大浏览器的表现是一致的）
1.3 子级元素的margin-top会传递给父级，除非遇到border或者padding，否则一直往更远的父级传递
针对这种情况，有如下几种解决方案
1.3.1 让父级浮动
1.3.2 父级增加border或着padding，并且一定要触发IE下的haslayout，否则在IE6、IE7下会产生margin消失的现象
1.4 IE6下双边距bug
产生条件：a、IE6 ；b、块属性元素；c、浮动；d、横向margin
既然知道了成立条件，那么只需要破除一个即可，综合以上，解决方案便是display
:inline;
2 border
除了solid类型的border外，其他两种都是有兼容性问题的，针对虚线 dashed类型的边框，正常使用时，一般不会将边框设置的很大，在border 宽度小的时候，表现还是基本一致的。IE6下是不支持1像素点线的 即 dotted (解决方案 ：采用背景平铺)
3 height
IE6下有个最小高度19px的限制，即如果元素高度小于19px，那么表现形式为19px
针对这种情况，有如下2种解决方案
3.1 通过设置当前元素的
font-size:0;来实现，不过该种方式只能将高度最小调整为2px
3.2 通过
overflow:hidden;来控制最小高度，该种方式可以完美解决
4 inline-block
IE6/7下不支持块属性标签的 display:inline-block;但是注意该属性可以激发IE下的hasLayout，很明显这可以用在加在父级上来清除浮动的目的，不过不建议（代码换行会被解析）
二、标签引发的问题
其实这个问题还没有太多可以说的地方，关键就是注意标签嵌套规范即可
1）、 p，内嵌元素，dt中尽量不要嵌套块属性元素，即便是通过display:inline;转换过来的块2）、拥有父子级关系的标签中，不用使用除了子级元素之外的其他任何标签，比如ul、ol下必然是li，虽然用了除此之外的其他标签仅仅针对于html和css来讲，不会产生怎样的影响，然后再后期js来获取元素的时候，遵循节点的原则，也就是所谓的DOM树结构，浏览器解析时会认为ul、ol下的子节点只可能是li，如果出现了其他标签，则可能出现找不到的情况
三、浮动引发的兼容问题
1)、让两个块属性元素在同行内显示，一般的做法就是两个块统一添加浮动，然而很多人会做如下处理，左边的块浮动，右边的div不设置浮动，靠后边元素挤上来实现类似的效果，很多人可能考虑写这样的代码
<style> .left{width:100px;height:100px;background:red;float:left;} .right{width:100px;height:100px;background:green;margin-left:100px;} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body>
标准浏览器下，不会有什么问题，然而在IE6下两个块之间则会产生3px的间隙，这个问题是没法解决的，所以如果实现类似的效果，请加浮动。
2)、关于li的问题
li本身没有浮动，假设页面结构如下
<style> .list { padding: 0; list-style: none; width: 300px; margin: 100px auto; } .list li { height: 30px; line-height: 30px; border: solid 1px #000; } a {float: right;} </style> </head> <body> <ul class="list"> <li> <span>测试一</span> <a href="#">测试一</a> </li> <li> <span>测试二</span> <a href="#">测试二</a> </li> <li> <span>测试三</span> <a href="#">测试三</a> </li> </ul> </body>
此时，IE6/7会产生链接折行问题，解决此问题的方法：左侧元素浮动，与此同时，则会产生新的问题
如果li本身没有浮动，而下面所有子元素已经浮动，那么每个li之间在IE6/7下则会产生4px的间隙BUG，解决方案：要么li浮动，要么通过属性 vertical-align:top;垂直对齐方式来去除间隙另外，如果li间隙问题和最小高度同时出现，解决方案只有一个，那就是li本身浮动，并且加上overflow:hidden;来控制最小高度问题
3)、IE6下文字溢出BUG
<body> <div style="width:400px"> <div style="float:left"></div> <!-- --> <div style="float:right;width:400px">↓这就是多出来的那只猪</div> </div>
放在IE6下则会看到明显的文字重复溢出效果
这个问题的解决方案也有很多种，产生原因：注释放在了两个浮动的元素之间
a、去除文字区域的宽度，或者调整宽度与父级之间大于3px的宽度 （小于父级至少3px的宽度）
b、文字溢出的div后边加上<br/>
c、既然和注释关系，那么我们完全可以将注释包含在一个<div></div>中来解决，个人建议可以使用该种解决方式
三、定位引发的兼容问题
定位方式 相对定位、绝对定位、固定定位
1）、IE6 7父级的
overflow:hidden;是包不住子级的relative （该种情况解决的话，父级加上定位即可，三种定位均可，不过考虑到相对定位不会对元素产生影响，一般拿相对定位来处理）
2）、IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差（解决方案：避免绝对定位父级的奇数宽高）
3）、IE6下不支持固定定位（IE6下样式为绝对定位）我们可以通过以下几种方式来模拟固定定位
a、通过调整html和body高度，并将滚动条加给body的方式来解决固定定位
如下代码
<style> html{height:100%;overflow:hidden;} body{overflow:auto;height:100%;marign:0;} .div{width:50px;height:50px;position:fixed;_position:absolute;border:solid 1px green;right:20px;bottom:100px;} .box{height:2000px;} </style> </head> <body> <div class="box"> <div class="div">测试一下</div> </div> </body> </html>
其实该种方式原理很简单，默认页面滚动条是在document上，设置html与可视区同等高度，然后通过
overflow:hidden;截掉超出部分，然后body设置于可视区同等高度，内容超出则出现滚动条，此时滚动条是body上，页面的中内容元素又设置了绝对定位，没有定位父级，那么此时是相对了文档进行定位，又因为文档本身在拉动滚动条时没有变化，所以实现了固定定位的效果。
b、利用css HACK来处理
如下代码
<style> .box{height:2000px;} .div{width:50px;height:50px;position:fixed;border:solid 1px green;left:100px;top:100px;_position:absolute; _top:expression(eval(document.documentElement.scrollTop+100));background:red;} </style> </head> <body> <div class="box"> <div class="div">测试一下</div> </div>
虽然以上两种方式都可以解决这个问题，但是引发的问题也比较多，扩展性也不是很好，而且在IE6下拉动滚动条时，会出现难看的抖动，因此还是建议利用JS来实现固定定位的效果，还可以加些运动来避免难看的抖动。
4）、当浮动元素和定位元素同一层级的时候，IE6下定位元素消失
如下代码
<style> .box{width:300px;height:300px;margin:100px auto;position:relative;background:yellow;} .floatsL{width:100px;height:100px;float:left;background:green;} .pos{position:absolute;left:-20px;top:0;width:50px;height:50px;background:red;} .floatsR{width:200px;height:100px;float:left;background:green;} </style> </head> <body> <div class="box"> <div class="pos"></div> <div class="floatsL"></div> <div class="floatsR"></div> </div> </body>
问题产生条件：a、IE6 b、当所有浮动元素的宽度之和减去父级宽度大于-3px c、浮动元素和定位元素位于同一结构层级（这个问题的一般解决方案是 给定位元素加个父级，让他们处于不同层次的结构层级）
四、表单元素引发的兼容问题
表单元素包括：文本框、下拉框、单选框、复选框、文本域、隐藏域、上传控件
其中常用而且容易出现兼容问题的是输入型元素 比如 输入框和文本域
a、文本框在IE6、7下上下会有1px间隙问题
可以如下代码查看
<style> .box{width:200px;border:solid 1px #000;} .box input{height:28px;border:1px solid blue;} </style> </head> <div class="box"> <input type="text" /> </div>
这个问题解决方案 就是 加浮动
b、文本框设置 border
:none;在IE6下无效
这个问题的解决方案有两个
1）、将border:none;更改为border:0;
2）、重设文本框的背景 个人建议采用此种方案
c、输入型表单控件加入背景，当文字超出文本框本身宽度时，背景会随着移动
解决方案也有两个
1）、设置背景时，把 fixed 加上 即background
:url(1.jpg) no-repeat fixed; 这么处理虽然可以处理掉文字超出文本宽度背景移动的问题，但是，如此处理的话，背景的位置其实是稍微有点不符的，与正常浏览器下比较的话，会有所偏差，而这个是无法调整的
2）、最好呢，还是给input外加个父级，然后给父级设置背景，一般的处理，就是input 去边框，去背景，边框背景加给父级，只需让父级和input同高同宽即可。
d、下拉框IE6下不支持高度设置，而且即便有了高度设置，加上line-height:30px;也无法控制文本的居中问题，并且在IE各版本下表现也不一致
其实可以看到各大网站在用到“下拉框”时，基本都是模拟出来的，因为本身带来的兼容性问题太大
e、文本域在浏览器下的兼容问题
其实这个也没什么大问题，只不过为了样式统一，一般会设置 resize:none;overflow:hidden;，注意overflow:auto; 在IE6即便区域够大，也可能出现滚动条
先整理这么多吧，以后发现的话再去扩展。
2045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
