2. 程式人生 > >關於css兼容性問題及一些常見問題匯總

關於css兼容性問題及一些常見問題匯總

阿新 • • 發佈：2019-03-23
http 瀏覽器中 中間 精確 height 進行 消失 邊框 pac

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

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

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

eg：（ie會撐開）

XML/HTML Code復制內容到剪貼板
  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>

2.圖片旋轉在IE6下有元素浮動時，如果寬度需要由內容撐開，就給裏邊的塊元素都加浮動，正常瀏覽器不用加浮動。

eg：

XML/HTML Code復制內容到剪貼板
  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>


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

　　解決辦法：添加overflow:hidden;

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

　　解決方法：切背景平鋪

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:

XML/HTML Code復制內容到剪貼板
  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
  8. 在IE6下父級有邊框的時候，子元素的margin值消失
  10. 解決辦法:觸發父級的haslayout
  11. */
  12. </style>
  13. </head>
  14. <body>
  15. <div class="box">
  16. <div class="div"></div>
  17. </div>
  18. </body>

6. css3背景動畫在IE6下，塊元素有浮動和和橫向的margin值 ，橫向的margin值會被放大成兩倍。

解決辦法：添加display:inline;

XML/HTML Code復制內容到剪貼板
  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 一行右側第一個元素有雙邊距
  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>

7. 在IE6，7下，li自身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙

解決辦法：1.給li加浮動
　2.給li加vertical-align:top;

註意：當IE6下最小高度問題，和 li的間隙問題共存的時候， 給li加浮動才能解決。

eg:

XML/HTML Code復制內容到剪貼板
  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>

8.當一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下就會失效

解決方法：額，還沒發現

eg：

XML/HTML Code復制內容到剪貼板
  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>

9. Bootstrap插件在IE6下的文字溢出BUG。即：子元素的寬度和父級的寬度相差小於3px的時候,或者兩個浮動元素中間有註釋或者內嵌元素的時候，IE6下文字溢出

解決辦法:用div把註釋或者內嵌元素用div包起來。

eg：

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


10. 當浮動元素和絕對定位元素是並列關系的時候，在IE6下絕對定位元素會消失。
解決辦法: 給定位元素外面包個div。

eg：

XML/HTML Code復制內容到剪貼板
  2. <style>
  3. .box{ width:200px;height:200px;border:1px solid #000; position:relative;}
  4. span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
  5. ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
  6. /*
  7. 當浮動元素和絕對定位元素是並列關系的時候，在IE6下絕對定位元素會消失
  8. 解決辦法:
  9. 給定位元素外面包個div
  10. */
  11. </style>
  12. </head>
  13. <body>
  14. <div class="box">
  15. <ul></ul>
  16. <span></span>
  17. </div>

11. 在IE6，7下，子元素有相對定位的話，父級的overflow包不住子元素。

解決辦法: 給父級也加相對定位 position:relative;。

eg：

XML/HTML Code復制內容到剪貼板
  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包不住子元素
  7. 解決辦法: 給父級也加相對定位position:relative;
  8. */
  9. </style>
  10. </head>
  11. <body>
  12. <div class="box">
  13. <div class="div"></div>
  14. </div>
  15. </body>

12. 在IE6下絕對定位元素的父級寬高是奇數的時候，元素的right值和bottom值會有1px的偏差.

　　解決辦法: 盡量用偶數，還沒發現別的方法。


13. 在IE6下，position：fixed; 是沒有效果的。

　　解決方法：用js來控制吧。。。

14. 在IE6，7下輸入類型的表單控件上下各有1px的間隙。

　　解決辦法：給input加浮動，或者是絕對定位。

15. 在IE6，7下輸入類型的表單控件加border:none;會發現border還在，

　　 解決辦法: 重置input的背景，如input{background:#fff;}; 或者使用border:0;或border:0 none;


16. 在IE6，7下輸入類型的表單控件輸入文字的時候，其背景圖片會跟著一塊移動 。

解決辦法: 把背景加給父級。

17. 更簡潔的css清理浮動方式：

CSS Code復制內容到剪貼板
  1. 方法1：
  3. /* 清理浮動 */
  4. .clearfix:after {
  5. visibility:hidden;
  6. display:block;
  7. font-size:0;
  8. content:" ";
  9. clear:both;
  10. height:0;
  11. }
  12. .clearfix {
  13. zoom:1;
  14. }
  16. 方法2：
  18. 在父元素加代碼：overflow:auto; zoom:1;

18. css強制換行與強制不換行：

/* 禁止換行 */ .nowrap{word-break:keep-all;white-space:nowrap;}
/* 強制換行 */ .break{word-break:break-all;}

19. 超鏈接樣式的設置：

a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */

格式化標簽的默認樣式;

20. css/js在線壓縮：（有YUI Compressor工具）

http://ganquan.info/yui/?hl=zh-CN

21. 當一行固定寬度，且顯示不下內容，則加省略號：

C# Code復制內容到剪貼板
  1. ｛white-space:nowrap;
  3. text-overflow:ellipsis; /* for internet explorer */
  5. overflow:hidden;
  7. width:190px;
  9. display:block;
  11. text-overflow:ellipsis｝
  13. text-overflow:ellipsis（代表三個點的省略號）


22. 瀏覽器兼容性
margin-bottom:40px; /*ff的屬性*/
margin-bottom:140px\9; /* IE6/7/8的屬性 */
color:red\0; /* IE8支持 */
*margin-bottom:450px; /*IE6/7的屬性*/
_margin-bottom:450px; /*IE6/7的屬性*/

關於css兼容性問題及一些常見問題匯總

相關推薦

轉載-沒有IE就沒有傷害！瀏覽器兼容性問題解決方案匯總

events remove isp 為什麽 match 搜索 1.4 blog 會有 普及：瀏覽器的兼容性問題，往往是個別瀏覽器（沒錯，就是那個與眾不同的瀏覽器）對於一些標準的定義不一致導致的。俗話說：沒有IE就沒有傷害。 貼士：內容都是自己總結的，不免會出現錯誤或者bu

關於css兼容性問題及一些常見問題匯總

http 瀏覽器中 中間 精確 height 進行 消失 邊框 pac 目前主流瀏覽器的兼容性做的都比較好了，本文主要針對IE6，7的不兼容問題進行解決。 1.圓盤時鐘有浮動存在時，計算一定要精確，不要讓內容的寬高超出我們所設置的寬高，IE6下，內容會撐開設置好的高度。

各類網頁兼容性及解決

tab hacker ble ie不兼容 實現 為什麽 布局 第一個 -h 所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什麽瀏覽器來查看我們的網站或者登陸我們的系統，都應該是統一

常見的兼容性問題及解決方案

city alpha cit osi 解決 isp 解決方案 ive pac 1、雙邊距BUG ：塊級元素float後再設置margin時，IE6顯示的margin比設置的大 使用 _display: inline 解決 2、3像素問題:一個元素左

從零開始學習前端開發 — 7、常見瀏覽器兼容性問題及圖片整合技術

火狐 其中 針對 大小 webkit 最新 opacity屬性 引擎優化 pac 一、常見瀏覽器兼容性問題 1.雙倍浮動bug 描述：塊狀元素設置了float後，又設置了橫向的margin，在IE6下顯示的margin值要比設置的值大 解決方案： 給float的元素添加di

轉 CSS 多瀏覽器兼容性問題及解決方案

技術分享 equal 間隙 containe 原因 解析 add 頁面 無法 兼容性處理要點1、DOCTYPE 影響 CSS 處理 2、FF: 設置 padding 後， div 會增加 height 和 width， 但 IE 不會， 故需要用 !importa

css中position 定位的兼容性，以及定位的使用及層級的應用

技術 number 窗口 fix padding 就會 border 代碼 兼容 一、首先我們來看看定位的兼容性，當然是在IE6、7但是現在大多數公司都已經不考慮了 我們就作為一個了解吧： 1、在IE67下,子元素有相對定位的話,父級的overflow:hidden包不住子

Android 9 Pie 兼容性常見問題及註意事項

sde 服務 分享 場景 schedule 使用 運行時 函數調用 rman 應用不兼容的常見原因 使用了系統的 ClassLoader 加載 org.apache.http.* 的庫 Android M 就已經開始移除對 Apache HTTP client 的支持。而

前端常見的瀏覽器兼容性問題及解決方案

統一 方案 inter and spa 高度 pan sof 自己 常見的兼容性問題： 1、不同瀏覽器的標簽默認的外補丁( margin )和內補丁(padding)不同 解決方案： css 裏增加通配符 * { margin: 0; padding: 0; } 2、I

CSS在IE6中常見的兼容性問題

內聯 就會 刪除 oat ie 6 pre 距離 alt www 1.在IE6中png24格式的圖片不透明 解決辦法：寫一個條件註釋語句，引入一個js插件，然後調用一下js中的方法，把需要處理的元素的類名寫在括號中，如下 （插件下載地址：http://www.dille

HTML和CSS在IE7中常見的兼容性問題

針對 display css bottom ati posit lin 性問題 兼容性問題 IE7及以下版本都會有這些問題 1.IE7塊轉內聯塊問題 　　問題描述：好像塊轉內聯塊失敗，依然不在一行排列 　　解決辦法：給元素添加如下css *display:inl

CSS的兼容性

sof highlight containe ron pad border form expr spl 水平居中問題 IE下只要設置body{text-align:center;}這樣就可以居中顯示。Firefox需要設置為:body:{text-align:center

針對IE低版本兼容性問題的一些解決方案

style 兼容性 html shee ble 版本兼容 mpat src less <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

ie下常見的css兼容問題

-m blank href 消失 特性 元素 out 識別 play 1.border-radius 邊框圓角 IE8及以下瀏覽器不支持border-radius webkit引擎支持-webkit-borderradius 私有屬性 mozilla Gecko引擎支持

html常見兼容性問題？

pos alpha import 容器 sel 下使用 display 常見 spl 1.雙邊距BUG float引起的 使用display 2.3像素問題 使用float引起的 使用dislpay:inline -3px 3.超鏈接hover 點擊後失效 使用正確

不同瀏覽器創建 ajax XMLHTTPRequest對象的方法及兼容性問題總結

on() 設置 arr 斷開 告訴 應該 匿名 讀取 abort XMLHttpRequest 對象是AJAX功能的核心，要開發AJAX程序必須從了解XMLHttpRequest 對象開始。 了解XMLHttpRequest 對象就先從創建XMLHttpRequest 對

Bootstrap 引入文件順序及IE兼容性js

ont -m scale script init html lec ati bootstrap <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8">

js修改css時如何考慮兼容性問題es5+es6

return defined 使用方法 get 修改 export mstr end 寫法 es5的寫法 var elementStyle = document.createElement(‘div‘).style var vendor = (function(){

ie6兼容性問題匯總

[0 使用 daima 信息 fault size www. onclick事件 check 1、取屏幕高寬信息之前在ie8使用document.documentElement.clientHeight取值，該值在ie6中為0.後改成：clientHeight = docu

關於IE和Firefox兼容性問題及解決辦法

解決辦法 select 警告 性問題 strong 多個 obj style 高度 1、//window.eventIE:有window.event對象FF:沒有window.event對象。可以通過給函數的參數傳遞event對象。如onmousemove=doMouseM