總結css兼容問題

時間  2019-12-05
標籤 總結 css 兼容 問題 欄目 CSS 简体版
原文   原文鏈接

目前主流瀏覽器的兼容性作的都比較好了，本文主要針對IE6，7的不兼容問題進行解決。css

1.有浮動存在時，計算必定要精確，不要讓內容的寬高超出咱們所設置的寬高，IE6下，內容會撐開設置好的高度。css3

　　解決方法：給對應的父級加overflow:hidden;可是會有部分被隱藏掉，最好是精確計算寬高再設定express

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>
View Code

 

2. 在IE6下有元素浮動時，若是寬度須要由內容撐開，就給裏邊的塊元素都加浮動，正常瀏覽器不用加浮動。ide

eg：this

 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>
View Code

 

3. 在IE6下元素的高度的小於19px的時候，會被當作19px來處理spa

　　解決辦法：添加overflow:hidden;3d

 

4. 在IE6下border:1px dotted #000;中，dotted不支持，會以虛線的方式的出現。code

　　解決方法：切背景平鋪blog

 

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>
View Code

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>
View Code

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>
View Code

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>
View Code

 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">&darr;哈哈哈哈哈哈哈哈哈哈</div>
12 </div>
13 <!--
14     在IE6下的文字溢出BUG
15     
16     子元素的寬度和父級的寬度相差小於3px的時候,兩個浮動元素中間有註釋或者內嵌元素
17     
18     解決辦法:用div把註釋或者內嵌元素用div包起來    
19 -->
20 </body>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

 

目前知道的css兼容性問題只有這些，固然不包括css3，若有新發現或以上存在問題，請給予指點。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程