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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。