css-兼容性问题及解决（二）
1：在IE6下的文字溢出BUG ： 子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素
解决办法:用div把注释或者内嵌元素用div包起来
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 .box{ width:400px;}
8 .left{float:left;}
9 .right{width:400px;float:right;}
10 </style>
11 </head>
12 <body>
13 <div class="box">
14 <div class="left"></div>
15 <div><!-- IE6下的文字溢出BUG --><span></span></div>
16 <div class="right">↓leo是个大胖子</div>
17 </div>
18 <!--
19 在IE6下的文字溢出BUG
20 子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素
21 解决办法:用div把注释或者内嵌元素用div包起来
22 -->
23 </body>
24 </html>
2： 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失
解决办法: 给定位元素外面包个div
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 .box{ width:200px;height:200px;border:1px solid #000; position:relative;}
8 span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
9 ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
10 /*
11 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失
12 解决办法:
13 给定位元素外面包个div
14 */
15 </style>
16 </head>
17 <body>
18 <div class="box">
19 <ul></ul>
20 <span></span>
21 </div>
22 </body>
23 </html>
标准下：
ie6下：
3：在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素
解决办法: 给父级也加相对定位
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 .box{ width:200px;height:200px;border:1px solid #000; overflow:auto; position:relative;}
8 .div{ width:150px;height:300px;background:yellow; position:relative;}
9 /*
10 在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素
11 解决办法: 给父级也加相对定位
12 */
13 </style>
14 </head>
15 <body>
16 <div class="box">
17 <div class="div"></div>
18 </div>
19 </body>
20 </html>
ie6,7下：
标准下：
4：在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 .box{width:201px;height:201px;border:1px solid #000; position:relative;}
8 .box span{ width:20px;height:20px;background:yellow; position:absolute;right:-1px;bottom:-1px;}
9 /*
10 在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差
11 */
12 </style>
13 </head>
14 <body>
15 <div class="box">
16 <span></span>
17 </div>
18 </body>
19 </html>
5：ie6下不支持固定定位
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 body{height:1000px;margin:0;}
8 .box{width:100px;height:100px;background:Red; position:fixed;left:50px;top:100px;}
9 </style>
10 </head>
11 <body>
12 <div class="box"></div>
13 </body>
14 </html>
时间： 2024-08-03 13:20:18