ie6 3px bug 修复

时间 2019-11-18

标签 ie6 3px bug 修复栏目浏览器繁體版

原文原文链接

出现场合: 当元素浮动时后续元素与其接触的位置会产生3像素间隔以下代码html

 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta name="description" content="">
 7     <meta name="author" content="">
 8     <title>Template Index</title>
 9   <style>
10   #container {
11     width: 600px;
12     height: 600px;
13     background: #F8CB9C;
14   }
15   #left {
16     width: 200px;
17     height: 100px;
18     background-color: red;
19     float: left;
20   }
21   #right {
22     background-color: green;
23     width: 400px;
24     height: 100px;
25     margin-left: 200px;
26   }
27   </style>
28 </head>
29 <body>
30   <div id="container">
31     <div id="left">
32     </div>
33     <div id="right">
34     </div>
35   </div>
36 </body>
37 </html>

在标准浏览器中应该表现以下浏览器

然而ie6会在left和right之间多出3px, 使得right下移如图: 布局

一样的道理, 当元素右浮动时, 左侧相邻元素与之产生多余3px间隔spa

如何修复:.net

给#right取消width的固定值

 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta name="description" content="">
 7     <meta name="author" content="">
 8     <title>Template Index</title>
 9   <style>
10   #container {
11     width: 600px;
12     height: 600px;
13     background: #F8CB9C;
14   }
15   #left {
16     width: 200px;
17     height: 100px;
18     background-color: red;
19     float: left;
20   }
21   #right {
22     background-color: green;
23     /*width: 400px;*/
24     height: 100px;
25     margin-left: 200px;
26   }
27   </style>
28 </head>
29 <body>
30   <div id="container">
31     <div id="left">
32     </div>
33     <div id="right">
34     </div>
35   </div>
36 </body>
37 </html>

获得IE6下效果如图很显然这能实现两列的效果, 可是右边列宽度减少而且两列中间存在明显的缝隙. code

取消#right的margin-left而且将其float:right在IE6下效果如图这样作达到了咱们想要的效果, 消除了缝隙, 2列布局, 缺点是: 并非在任何状况下均可以将相邻元素分别浮动

使用IE条件注释指定针对IE6的样式设置#left #right微调margin

 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta name="description" content="">
 7     <meta name="author" content="">
 8     <title>Template Index</title>
 9   <style>
10   #container {
11     width: 600px;
12     height: 600px;
13     background: #F8CB9C;
14   }
15   #left {
16     width: 200px;
17     height: 100px;
18     background-color: red;
19     float: left;
20   }
21   #right {
22     background-color: green;
23     width: 400px;
24     height: 100px;
25     margin-left: 200px;
26   }
27   </style>
28   <!--[if IE 6]>
29   <style>
30   #left { margin-right: -3px; }
31   #right { margin-left: 197px; }
32   </style>
33   <![endif]-->
34 </head>
35 <body>
36   <div id="container">
37     <div id="left">
38     </div>
39     <div id="right">
40     </div>
41   </div>
42 </body>
43 </html>

效果如图这样效果貌似不错. 也没什么明显缺点htm

source: http://www.simonbattersby.com/blog/ie6-and-the-3px-bug/blog

参考:http://www.positioniseverything.net/explorer/threepxtest.htmlthree