2. 程式人生 > >ie6, ie7兼容性問題以及處理辦法

ie6, ie7兼容性問題以及處理辦法

阿新 • • 發佈：2017-07-29
文檔 -1 20px 觸發 highlight flow 性問題 name png

1、IE6中絕對定位位置錯誤
問題描述：在ie6中，如果參照物沒有觸發haslayout ，那麽絕對定位的容器的left和bottom就會有問題。
解決辦法：在相對定位的父容器上加入 zoom:1 來觸發ie的haslayout即可解決。
小技巧：通常我們在設置一個容器為position:relative的時候 ，都會加上zoom:1來解決很多ie下的問題。

2、IE6中絕對定位1像素偏差
問題描述：在 IE6 下定位元素的父級寬高都為奇數時，那麽在 IE6 下定位元素的 right和bottom都有1像素的偏差。
解決辦法：設為偶數。

[html]
  1. <style>
  2. #box1{width:303px; height:303px;border:1px solid black; position:relative;}
  3. #box2{ width:50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;}
  4. </style>
  6. <body>
  7. <div id="box1">
  8. <div id="box2"></div>
  9. </div>
  10. </body>

3、IE6浮動元素雙邊距bug
問題描述：IE6下塊元素有浮動和橫向margin的時候，橫向的margin值被放大成兩倍。
解決辦法：給浮動元素加 display:inline。

[html]
  1. <style>
  2. body{margin:0;}
  3. .wrap{float:left;border:2px solid #000;}
  4. .box{width:100px;height:100px;background:red;margin:0 100px;float:left;display:inline; }
  5. /*
  6. IE6下的雙邊距BUG:
  7. 在IE6下，塊元素有浮動和橫向margin的時候，橫向的margin值會被放大成兩倍
  8. 解決辦法: display:inline;
  9. */
  10. </style>
  12. <body>
  13. <div class="wrap">
  14. <div class="box"></div>
  15. </div>
  16. </body>

4、IE67下li底部間隙的BUG
問題描述：在ie67下，li本身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙。
解決辦法：給li設置 float:left或者給li加vertical-align:top。

[html]
  1. <style>
  2. .list{ width:300px;margin:0;padding:0;}
  3. .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;}
  4. .list a{float:left;}
  5. .list span{float:right;}
  6. /*
  7. IE6，7下li的間隙
  8. 在IE6，7下li本身沒浮動,但是li內容有浮動的時候，li下邊就會產生幾px的間隙
  9. 解決辦法: 1.給li加浮動 或者 2.給li加vertical-align:top;
  10. */
  11. </style>
  13. <body>
  14. <ul class="list">
  15. <li>
  16. <a href="#">文字文字文字文字文字</a>
  17. <span>作者</span>
  18. </li>
  19. <li>
  20. <a href="#">文字文字文字文字文字</a>
  21. <span>作者</span>
  22. </li>
  23. </ul>
  24. </body>

5、IE6下最小高度問題

問題描述：在IE6下高度小於19px的元素，高度會被當做19px來處理。

解決辦法：設置font-size：0;

[html]
  1. <style>
  2. body{ margin:0;background:#000;}
  3. .box{height:5px;background:red; font-size:0;}
  4. /*
  5. 在IE6下高度小於19px的元素，高度會被當做19px來處理
  6. 解決辦法:font-size:0; 或者 overflow:hidden;
  7. */
  8. </style>
  10. <body>
  11. <div class="box"></div>
  12. </body>

6、ie6 下子級的相對定位

問題描述：ie6 下父級的overflow:hidden;是包不住子級的相對定位的。

解決辦法：父級也設為相對定位。

[html]
  1. <style>
  2. #box1{width:500px; height:300px; background:blue; overflow:hidden;position:relative;}
  3. #box2{width:300px; height:500px; background:yellow; position:relative;}
  4. </style>
  5. </head>
  6. <body>
  7. <div id="box1">
  8. <div id="box2"></div>
  9. </div>
  10. </body>

7、在IE6下子元素margin問題

問題描述：在IE6下父級有邊框的時候，子元素的margin值消失。

解決辦法：觸發父級的haslayout。

[html]
  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. </style>
  7. <body>
  8. <div class="box">
  9. <div class="div"></div>
  10. </div>
  11. </body>

8、在IE6下的文字溢出BUG

問題描述：子元素的寬度和父級的寬度相差小於3px的時候或兩個浮動元素中間有註釋或者內嵌元素。

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

[html]
  1. <style>
  2. .box{ width:400px;}
  3. .left{float:left;}
  4. .right{width:400px;float:right;}
  5. </style>
  7. <body>
  8. <div class="box">
  9. <div class="left"></div>
  10. <div><!-- IE6下的文字溢出BUG --><span></span></div>
  11. <div class="right">↓leo是個大胖子</div>
  12. </div>
  13. </body>

9、絕對定位元素消失

問題描述：當浮動元素和絕對定位元素是並列關系的時候，在IE6下絕對定位元素會消失。

解決辦法：給定位元素外面包個div。

[html]
  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. </style>
  7. <body>
  8. <div class="box">
  9. <ul></ul>
  10. <span></span>
  11. </div>

10、表單控件1px間隙

問題描述：在IE6，7下輸入類型的表單控件上下各有1px的間隙。

解決辦法：給input加浮動。

[html]
  1. <style>
  2. .box{ width:200px;height:32px;border:1px solid red;}
  3. input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}
  4. </style>
  5. <div class="box">
  6. <input type="text" />
  7. </div>

11、表單控件加border:none無效

問題描述：在IE6，7下輸入類型的表單控件加border:none無效。

解決辦法：重置input的背景。

[html]
  1. .box{ width:200px;height:32px;border:1px solid red;background:yellow;}
  2. input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}
  3. <div class="box">
  4. <input type="text" />
  5. </div>

12、表單控件背景圖片會移動

問題描述：在IE6，7下輸入類型的表單控件輸入文字的時候，背景圖片會跟著一塊移動。

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

[html]
  1. .box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
  2. input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
  3. <div class="box">
  4. <input type="text" />
  5. </div>

13、ie6下png

問題描述：ie6不支持png24的圖片

[html]
    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. body{ background:#000;}
    8. .box{width:400px;height:400px;background:url(img/png.png);}
    9. </style>
    10. <!--[if IE 6]>
    11. <script src="DD_belatedPNG_0.0.8a.js"></script>
    12. <script>
    13. DD_belatedPNG.fix(‘.box‘);
    14. </script>
    15. <![endif]-->
    16. </head>
    17. <body>
    18. <div class="box"></div>
    19. </body>
    20. </html>

ie6, ie7兼容性問題以及處理辦法

相關推薦

IE6的兼容性以及處理方法

lap hover cells 復制。 idt vertical 語句 多個 left 1. 當我們寫了一段正確的代碼，但是在不同瀏覽器下，產生一些不正確的解析，這叫做兼容性問題 2. 在IE6下 ，標準盒模型: width/height = content; 可視寬/高

ie6, ie7兼容性問題以及處理辦法

文檔 -1 20px 觸發 highlight flow 性問題 name png 1、IE6中絕對定位位置錯誤問題描述：在ie6中，如果參照物沒有觸發haslayout ，那麽絕對定位的容器的left和bottom就會有問題。解決辦法：在相對定位的父容器上加入 zoom:

VMware Workstation虛擬機兼容性問題處理

兼容 shadow 更改 copy 運行 work 解決 strong works 問題說明我們經常會使用VMware Workstation做一些實驗，有的時候會copy一些別人已經做好的虛擬機到自己的電腦上來運行，但是在開啟虛擬機的時候會報一些兼容性的問題，原因是：其他

瀏覽器兼容性以及寫法

p s || oom 跟著 font 低版本 解決 pac 不起作用 瀏覽器的兼容性以及寫法 第一個 清除浮動的兼容性 第二個 透明度的兼容寫法 第三個 js獲取節點的兼容寫法 清楚浮動在低版本瀏覽器不行，需要處理兼容性加一個 .clearfix{ *zoom：1；}

jQuery與IE兼容性問題處理

detail 遇到 inf .net 參考 問題 UNC window not jQuery雖然是兼容所有主流的瀏覽器，但實際應用中也會存在很多兼容性的問題。使用IE11+jquery-3.2.1.min.js遇到的問題如： 對象不支持indexOf 在低版本中，1.8

ie6, ie7相容性問題以及處理辦法彙總

1、IE6中絕對定位位置錯誤 問題描述：在ie6中，如果參照物沒有觸發haslayout ，那麼絕對定位的容器的left和bottom就會有問題。 解決辦法：在相對定位的父容器上加入 zoom:1 來觸發ie的haslayout即可解決。 小技巧：通常我們在設定一個容器為p

如何處理HTML5新標簽的兼容性問題

新增 框架 結構 type ie7 ie 9 最好 好的 scrip 支持HTML5新標簽： * IE8/IE7/IE6支持通過document.createElement方法產生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽， 瀏覽器支持新標簽後，

兼容性— IE6下子元素寬高會撐大父級

color html image oct 編寫代碼 ack box ie6 images <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Android 高版本API方法在低版本系統上的兼容性處理

file mea param data- count clas eve lint -i Android 版本更替，新的版本帶來新的特性，新的方法。 新的方法帶來許多便利，但無法在低版本系統上運行，如果兼容性處理不恰當，APP在低版本系統上，運行時將會crash。 本文以一個

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

bind()兼容性處理

使用 spa clas cnblogs 方法 解決 pro apply() call bind()方法可以改變一個方法中的this，並且不立即執行該方法，但是該方法存在兼容性問題，IE9+，ff4+，chrome7+支持此方法，opera和safari不支持。因此我們需要使

workstation12虛機導入vcenter6.0的兼容性處理

虛機導入現象：使用vmware workstation pro 12建立的虛機，在ovf導入vcenter6.0時報兼容性錯誤。分析：這個vmx-12是指的vmware workstation pro 12，目前vcenter6.0不支持vmx-12，最高支持到vmx-11解決：導出ovf時，選擇降級獲得vc

javascript event事件兼容性處理

cli clientx click script document java 事件 () 坐標 ie 6-8支持event事件,ff瀏覽器不支持 獲取鼠標點擊位置的坐標 document.onclick = function(){ alert(event.cl

瀏覽器兼容性處理大全

內容 ide idea spa textarea ie6 inline int 原來 【轉】【web前端開發】瀏覽器兼容性處理大全 1、居中問題 div裏的內容，IE默認為居中，而FF默認為左對齊，可以嘗試增加代碼margin: 0 auto; 2、高度問題 兩

熔毀和幽靈高危漏洞的補丁下載以及與防病毒軟件的兼容性

推理 編輯器 將不 win -o ftw 註冊 read execution Microsoft 已經意識到一類公開披露的新漏洞，這些漏洞稱為“推理執行側信道攻擊”，會影響許多新式處理器和操作系統，包括 Intel、AMD 和 ARM 的芯片組。 註意 此問題還會影響其他系

axios的兼容性處理

保護 客戶端 acc catch client brush ftp blog () 一、簡介 看看官網的簡介： “Promise based HTTP client for the browser and node.js” 譯：基於 Promise 的 HTTP 請求客戶

清除浮動的幾種方式和兼容性處理

不容易 初學 str strong ott tex right pos 文檔流 清除浮動的幾種方式和兼容性處理 在清除浮動前我們要了解兩個重要的定義： 浮動的定義：使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。 高度塌陷：浮動元素父元素高度

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

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

使用axios對安卓或者ios低版本兼容性處理

-c 使用 cnp ios from 兼容 無法使用 sel size 原因：不支持ES6，無法使用promise 解決辦法： 1.安裝 es6-promise cnpm install es6-promise --save-dev 2.引入 es6-promise