总结css兼容问题
目前主流浏览器的兼容性做的都比较好了，本文主要针对 IE6，7 的不兼容问题进行解决。
1.有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6 下，内容会撑开设置好的高度。
解决方法：给对应的父级加 overflow:hidden; 但是会有部分被隐藏掉，最好是精确计算宽高再设定
eg：（ie 会撑开）
1 <style> 2 .box{ width:400px;} 3 .left{ width:200px;height:300px;background:red;float:left;} 4 .right{ width:200px;float:right;} 5 .div{width:180px;height:180px;background:blue;padding:15px;} 6 /* 7 计算一定要精确 不要让内容的宽高超出我们设置的宽高 8 在 IE6 下，内容会撑开设置好的宽高 9 */ 10 </style> 11 </head> 12 <body> 13 <div class="box"> 14 <div class="left"></div> 15 <div class="right"> 16 <div class="div"></div> 17 </div> 18 </div> 19 </body>
2. 在 IE6 下有元素浮动时，如果宽度需要由内容撑开，就给里边的块元素都加浮动，正常浏览器不用加浮动。
eg：
1 <style> 2 .box{ width:400px;} 3 .left{background:red;float:left;} 4 .right{float:right; background:blue;} 5 h3{margin:0;height:30px; float:left;} 6 /* 7 在 IE6 元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="left"> 14 <h3>左侧</h3> 15 </div> 16 <div class="right"> 17 <h3>右侧</h3> 18 </div> 19 </div> 20 </body>
3. 在 IE6 下元素的高度的小于 19px 的时候，会被当做 19px 来处理
解决办法：添加 overflow:hidden;
4. 在 IE6 下 border:1px dotted #000; 中，dotted 不支持，会以虚线的方式的出现。
解决方法：切背景平铺
5. 在所有浏览器中子元素的 margin-top，margin-bottom 值会传递给父级；
解决办法：
a：给父级都添加浮动（或者给子级添加浮动也能解决 margin-top 问题，但是 margin 左右值会出现双倍的值，也就是双边据 bug 问题，下面会讲）；
b：给父级添加 position:relative;(或 position:absolute; 但是会脱离文档流)
c：添加 display:inline-block; 正常浏览器，可行，但是 IE,7 下，块元素不支持 display:inline-block;
d: 给附件添加 border 属性，例如 border:1px solid red; 正常浏览器可行，在 IE6 下必须再给父级添加 zoom:1;
eg:
1 <style> 2 body{margin:0;} 3 .box{background:blue;border:1px solid #000; zoom:1;} 4 .div{width:200px;height:200px;background:red;margin:100px;} 5 /* 6 在 IE6 下解决 margin 传递要触发 haslayout 7 8 在 IE6 下父级有边框的时候，子元素的 margin 值消失 9 10 解决办法: 触发父级的 haslayout 11 */ 12 </style> 13 </head> 14 <body> 15 <div class="box"> 16 <div class="div"></div> 17 </div> 18 </body>
6. 在 IE6 下，块元素有浮动和和横向的 margin 值 ，横向的 margin 值会被放大成两倍。
解决办法：添加 display:inline;
1 <style> 2 .box{ float:left;border:10px solid #000;} 3 .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;} 4 /* 5 margin-right 一行右侧第一个元素有双边距 6 7 margin-left 一行左侧第一个元素有双边距 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div>1</div> 14 <div>2</div> 15 <div>3</div> 16 <div>4</div> 17 </div> 18 </body>
7. 在 IE6，7 下，li 自身没浮动，但是 li 的内容有浮动，li 下边就会产生一个间隙
解决办法：1. 给 li 加浮动
2. 给 li 加 vertical-align;
注意：当 IE6 下最小高度问题，和 li 的间隙问题共存的时候， 给 li 加浮动才能解决。
eg:
1 <style> 2 ul{margin:0;padding:0;width:302px;} 3 li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;} 4 a{width:100px;float:left;height:30px;background:Red;} 5 span{width:100px;float:right;height:30px;background:blue;} 6 /* 7 在 IE6，7 下，li 本身没浮动，但是 li 的内容有浮动，li 下边就会产生一个间隙 8 解决办法: 9 1. 给 li 加浮动 10 2. 给 li 加 vertical-align 11 */ 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li> 17 <a href="#"></a> 18 <span></span> 19 </li> 20 <li> 21 <a href="#"></a> 22 <span></span> 23 </li> 24 <li> 25 <a href="#"></a> 26 <span></span> 27 </li> 28 </ul> 29 </body>
8.当一行子元素占有的宽度之和和父级的宽度相差超过 3px, 或者有不满行状态的时候, 最后一行子元素的下 margin 在 IE6 下就会失效
解决方法：额，还没发现
eg：
1 <style> 2 .box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;} 3 .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;} 4 /* 5 当一行子元素占有的宽度之和和父级的宽度相差超过 3px, 或者有不满行状态的时候, 最后一行子元素的下 margin 在 IE6 下就会失效 6 */ 7 </style> 8 </head> 9 <body> 10 <div class="box"> 11 <div>1</div> 12 <div>2</div> 13 <div>3</div> 14 <div>4</div> 15 <div>1</div> 16 <div>2</div> 17 <div>3</div> 18 <div>4</div> 19 <div>1</div> 20 <div>2</div> 21 <div>3</div> 22 <!-- <div>4</div> --> 23 </div>
9. 在 IE6 下的文字溢出 BUG。即：子元素的宽度和父级的宽度相差小于 3px 的时候, 或者两个浮动元素中间有注释或者内嵌元素的时候，IE6 下文字溢出
解决办法:用 div 把注释或者内嵌元素用 div 包起来。
eg：
1 <style> 2 .box{ width:400px;} 3 .left{float:left;} 4 .right{width:400px;float:right;} 5 </style> 6 </head> 7 <body> 8 <div class="box"> 9 <div class="left"></div> 10 <!-- IE6 下的文字溢出 BUG --><span></span> 11 <div class="right">↓哈哈哈哈哈哈哈哈哈哈</div> 12 </div> 13 <!-- 14 在 IE6 下的文字溢出 BUG 15 16 子元素的宽度和父级的宽度相差小于 3px 的时候, 两个浮动元素中间有注释或者内嵌元素 17 18 解决办法: 用 div 把注释或者内嵌元素用 div 包起来 19 --> 20 </body>
10. 当浮动元素和绝对定位元素是并列关系的时候，在 IE6 下绝对定位元素会消失。
解决办法: 给定位元素外面包个 div。
eg：
1 <style> 2 .box{ width:200px;height:200px;border:1px solid #000; position:relative;} 3 span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;} 4 ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;} 5 /* 6 当浮动元素和绝对定位元素是并列关系的时候，在 IE6 下绝对定位元素会消失 7 解决办法: 8 给定位元素外面包个 div 9 */ 10 </style> 11 </head> 12 <body> 13 <div class="box"> 14 <ul></ul> 15 <span></span> 16 </div>
11. 在 IE6，7 下，子元素有相对定位的话，父级的 overflow 包不住子元素。
解决办法: 给父级也加相对定位 position:relative;。
eg：
1 <style> 2 .box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /* position:relative; */ } 3 .div{ width:150px;height:300px;background:yellow; position:relative;} 4 /* 5 在 IE6，7 下，子元素有相对定位的话，父级的 overflow 包不住子元素 6 7 解决办法: 给父级也加相对定位 position:relative; 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="div"></div> 14 </div> 15 </body>
12. 在 IE6 下绝对定位元素的父级宽高是奇数的时候，元素的 right 值和 bottom 值会有 1px 的偏差.
解决办法: 尽量用偶数，还没发现别的方法。
13. 在 IE6 下，position：fixed; 是没有效果的。
解决方法：用 js 来控制吧。。。
1 <style> 2 body{height:1000px;margin:0;} 3 .box{width:100px;height:100px;background:Red; position:fixed;left:50px;bottom:150px; 4 _position:absolute; 5 _bottom:auto; 6 _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,0)||0)-(parseInt(this.currentStyle.marginBottom,0)||0))); 7 } 8 </style> 9 </head> 10 <body> 11 <div class="box"></div>
14. 在 IE6，7 下输入类型的表单控件上下各有 1px 的间隙。
解决办法：给 input 加浮动，或者是绝对定位。
15. 在 IE6，7 下输入类型的表单控件加 border:none; 会发现 border 还在，
解决办法: 重置 input 的背景，如 input{background:#fff;}; 或者使用 border:0; 或 border:0 none;
16. 在 IE6，7 下输入类型的表单控件输入文字的时候，其背景图片会跟着一块移动 。
解决办法: 把背景加给父级。
17. 关于 margin 负值在 IE6 下不兼容的问题，
解决办法：给对应的属性加 position:relative;
eg:
1 <style> 2 .box{float:left;border:10px solid #000;margin:20px; display:inline;} 3 .box div{width:100px;height:100px;background:red; /* position:relative; */} 4 .div1{margin-top:-30px;} 5 .div2{margin-left:-30px;} 6 .div3{margin-bottom:-30px;} 7 .div4{margin-right:-30px;} 8 </style> 9 </head> 10 <body> 11 <div class="box"> 12 <div class="div1"></div> 13 </div> 14 <div class="box"> 15 <div class="div2"></div> 16 </div> 17 <div class="box"> 18 <div class="div3"></div> 19 </div> 20 <div class="box"> 21 <div class="div4"></div> 22 </div>
目前知道的 css 兼容性问题只有这些，当然不包括 css3，如有新发现或以上存在问题，请给予指点。