css-兼容性问题及解决(四)

时间：2015-12-11 20:27:58 阅读：153 评论：0 收藏：0 [点我收藏+]

标签：

1：计算一定要精确不要让内容的宽高超出我们设置的宽高，在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 .box{ width:400px;}
 8 .left{ width:200px;height:300px;background:red;float:left;}
 9 .right{ width:200px;float:right;}
10 .div{width:180px;height:180px;background:blue;padding:15px;}
11 /*
12  计算一定要精确 不要让内容的宽高超出我们设置的宽高
13  在IE6下，内容会撑开设置好的宽高
14 */
15 </style>
16 </head>
17 <body>
18 <div class="box">
19  <div class="left"></div>
20     <div class="right">
21      <div class="div"></div>
22     </div>
23 </div>
24 </body>
25 </html>

IE6:

标准下：

2：元素浮动之后能设置宽度的话就给元素加宽度；如果需要宽度是内容撑开就给它里边的块元素加上浮动；（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 .box{ width:400px;}
 8 .left{background:red;float:left;}
 9 .right{float:right; background:blue;}
10 h3{margin:0;height:30px; float:left;}
11 /*
12  在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动
13 */
14 </style>
15 </head>
16 <body>
17 <div class="box">
18  <div class="left">
19      <h3>左侧</h3>
20     </div>
21     <div class="right">
22      <h3>右侧</h3>
23     </div>
24 </div>

在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 .box{ width:400px;}
 8 .left{background:red;}
 9 .right{ background:blue;}
10 h3{margin:0;height:30px;}
11 /*
12  在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动
13 */
14 </style>
15 </head>
16 <body>
17 <div class="box">
18  <div class="left">
19      <h3>左侧</h3>
20     </div>
21     <div class="right">
22      <h3>右侧</h3>
23     </div>

在ie6下里边的块元素不加浮动显示效果：

3：在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动

 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 .left{width:100px;height:100px;background:Red; float:left;}
 8 .right{width:200px;height:100px;background:blue;float:left;}
 9 /*
10  在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动
11 */
12 </style>
13 </head>
14 <body>
15 <div class="box">
16  <div class="left"></div>
17     <div class="right"></div>
18 </div>
19 </body>
20 </html>

4：第一块元素浮动，第二块元素加margin值等于第一块元素，在IE6下会有间隙（3px）问题；

解决办法：css hack ；_margin-left:-3px

 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 .left{width:100px;height:100px;background:Red; float:left;}
 8 .right{width:200px;height:100px;background:blue;margin-left:100px;_margin-left:-3px;}
 9 </style>
10 </head>
11 <body>
12 <div class="box">
13  <div class="left"></div>
14     <div class="right"></div>
15 </div>
16 </body>
17 </html>