IE8兼容性問題

1. select輸入框中下拉按鈕不能頂到下邊框

html

<div class="div-one"><span>有上下padding</span><select class='select-one'><option>下拉菜單1</option><option>下拉菜單2</option><option>下拉菜單3</option></select><br><span>無上下padding</span><select class='select-two'><option>下拉菜單1</option><option>下拉菜單2</option><option>下拉菜單3</option></select></div>

css

.div-one {width: 600px;height: 100px; } .div-one select{ width: 200px;height: 40px;margin: 0 10px;/*IE的盒子模型*/ } .div-one .select-one {padding: 10px;border: 1px solid red;margin-bottom: 10px; }

2. IE不支持border-radius: 圓角

html

<div class="div-two"><div class="circle-one"></div><div class="circle-two"></div></div>

css

div[class^='circle'] { width: 100px;height: 100px;margin-top: 20px;margin-left: 20px;border: solid 1px red;behavior: url(./PIE.htc);/*支持IE8圓角 不行就加position:relative; 再不行就加z-index: 10*/border-radius: 50px;display: inline-block; } .circle-two {background: url(../images/circle.jpg); }

3. margin-top失效

//當時加一個1px的px就可以了。不解<!--[if IE 8]><p style="height:1px;display: inline-block;"></p>;<![endif]--><div class='div-three'><a href="http://blog.csdn.net/zhu1988renhui/article/details/7795923" target="_blank">參考</a><div class='margin-one'></div><div class="margin-two"></div><div class="margin-three"></div></div> /*margin 失效*/ .div-three {width: 200px;height: auto;margin: 20px; } .div-three .margin-one, .div-three .margin-two{width: 50px;height: 50px;float: left;margin: 5px } .div-three .margin-three {width: 110px;height: 50px;margin: 5px 0 0 5px;clear: both;background: #50C66C; } .div-three .margin-one { background: #51718E;} .div-three .margin-two { background: #8E518A;}

4. 莫名其妙的多出橫線 原因: border導致， 處理：清border

5. 輸入框不顯示默認文字 原因: IE8不支持placeholder

<p>方法一：對input加onfocus和onblur事件, 進頁面時，還是沒有···(再給input加個value就可以啦~~)</p><input type="" name="" onblur="if (this.value == '') {this.value = '方法一';}"onfocus="if (this.value == '方法一') {this.value = '';}" value="方法一"><p>方法二：引用placeholder.js插件,再加<pre><code>$(function() {$('input, textarea').placeholder();});</code></pre></p><input type="" name="" placeholder="方法二"><p>總結: <ul><li>方法一在onfous時，值就消失了，placeholer應該是在輸入值時，原始值才會消失</li><li>方法二只要加個插件，和那句js，就不用擔心有多個input中的placeholer</li></ul></p>

6. IE8不支持a標簽里面有button、input等元素的跳轉

<div><a href="http://www.wifiuncle.com" target="_blank"><button onclick="window.location=this.parentNode.href;">點擊按鈕</button></a><a href="http://www.wifiuncle.com"><input type="button" value="Submit" class="button" /></a><p>方法: <ul><li>1. 給button加 <code>onclick="window.location=this.parentNode.href;"</code></li> <li>2. 參考<a href="http://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8" >Stack Overflow</a><pre><code>$('input.button').click(function(){document.location = $(this).parents('a').first().prop('href');});</code></pre></li></ul></p></div>

7. IE8 對str.trim()會報錯, 應$.trim(str);

8. a標簽中含有img標簽就會有藍色邊框

<p>8. a標簽中含有img標簽就會有藍色邊框 <br>原因： ie6,7,8中對具有link屬性的img標簽會自動添加2px的border。<br>方法： img border: none</p><div class="div-seven"><a href="http:www.wifiuncle.com"><img src="./images/circle.jpg"></a><a href="http:www.wifiuncle.com"><img src="./images/circle.jpg" style="border: none\0"></a></div>

9. 上傳圖片不能預覽(本地可以預覽，在服務器就不能預覽，不解)

參考這個: http://blog.csdn.net/yangzhihello/article/details/23851369

10. IE和FF字體偏小

<p>原因: chrome不支持12px以下的字體，會自動轉成12px. IE和FF不會自動轉換，所以字就顯得比較小. 方法: 統一設置字體12px</p><div class="div-ten"><span class="one">我是10px</span><span class="two">我是12px</span></div>

11. ie8中變量與id沖突時， 必須用var聲明變量否則會報錯，firefoxhe chrome則不會。

<div class="div-eleven"><p id="eleven"> 我的id是eleven</p><img src="./images/varId.png"></div> var eleven；//eleven = $('#eleven').text(); //報錯var eleven = $('#eleven').text();console.log(eleven);

12. flash遮擋住頁面中元素

<object><param name="wmode" value="opaque"><embed wmode="opaque"></embed></object>

13. IE8 不支持bind this

13. IE8 不支持bind this

<p><a href="http://www.tuicool.com/articles/Mr6nMj7">一行代碼輕松搞定各種IE兼容問題</a></p> <p>加上這句也是蠻好用的 <code>&lt;meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/&gt;</code> </p>

14. 用jquery-1.7.1.min.js 漢字可能會亂碼， 改用jquery-1.9.1.min.js (還是1.8忘記了。。。)（這鍋不是IE8的）

IE8運行效果圖

代碼部分

<!DOCTYPE html> <html> <head><title>IE8 test</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="./css/style.css"><base target="_blank"> </head> <body><p>1. select輸入框中下拉按鈕不能頂到下邊框解決辦法: 去padding 但select中文字不能居中</p><div class="div-one"><span>有上下padding</span><select class='select-one'><option>下拉菜單1</option><option>下拉菜單2</option><option>下拉菜單3</option></select><br><span>無上下padding</span><select class='select-two'><option>下拉菜單1</option><option>下拉菜單2</option><option>下拉菜單3</option></select></div><hr><p>2. IE不支持border-radius: 圓角</p><div class="div-two"><div class="circle-one"></div><div class="circle-two"></div></div><hr><p>3. margin-top失效<br> <span>當時加一個1px的px就可以了。不解</span><pre><code>&lt;!--[if IE 8]&gt;&lt;p style="height:1px;display: inline-block;"&gt; &lt;/p&gt;&lt;![endif]--&gt;</code></pre><p><div class='div-three'><a href="http://blog.csdn.net/zhu1988renhui/article/details/7795923" target="_blank">參考</a><!----><div class='margin-one'></div><div class="margin-two"></div><div class="margin-three"></div></div><hr><p>4. 莫名其妙的多出橫線 原因: border導致， 處理：清border</p><hr><p>5. 輸入框不顯示默認文字 原因: IE8不支持placeholder</p> <div><p>方法一：對input加onfocus和onblur事件, 進頁面時，還是沒有···(再給input加個value就可以啦~~)</p><input type="" name="" onblur="if (this.value == '') {this.value = '方法一';}"onfocus="if (this.value == '方法一') {this.value = '';}" value="方法一"><p>方法二：引用placeholder.js插件,再加<pre><code>$(function() {$('input, textarea').placeholder();});</code></pre></p><input type="" name="" placeholder="方法二"><p>總結: <ul><li>方法一在onfous時，值就消失了，placeholer應該是在輸入值時，原始值才會消失</li><li>方法二只要加個插件，和那句js，就不用擔心有多個input中的placeholer</li></ul></p></div><hr><p>6. IE8不支持a標簽里面有button、input等元素的跳轉</p><div><a href="http://www.wifiuncle.com" target="_blank"><button onclick="window.location=this.parentNode.href;">點擊按鈕</button></a><a href="http://www.wifiuncle.com"><input type="button" value="Submit" class="button" /></a><p>方法: <ul><li>1. 給button加 <code>onclick="window.location=this.parentNode.href;"</code></li> <li>2. 參考<a href="http://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8" >Stack Overflow</a><pre><code>$('input.button').click(function(){document.location = $(this).parents('a').first().prop('href');});</code></pre></li></ul></p></div><hr><p>7. IE8 對str.trim()會報錯, 應$.trim(str);</p><hr><p>8. a標簽中含有img標簽就會有藍色邊框 <br>原因： ie6,7,8中對具有link屬性的img標簽會自動添加2px的border。<br>方法： img border: none</p><div class="div-seven"><a href="http:www.wifiuncle.com"><img src="./images/circle.jpg"></a><a href="http:www.wifiuncle.com"><img src="./images/circle.jpg" style="border: none\0"></a></div><p>9. 上傳圖片不能預覽(本地可以預覽，在服務器就不能預覽，不解)<a href="http://blog.csdn.net/yangzhihello/article/details/23851369">參考下這個</a></p><p>10. IE和FF字體偏小 原因: chrome不支持12px以下的字體，會自動轉成12px. IE和FF不會自動轉換，所以字就顯得比較小. 方法: 統一設置字體12px</p><div class="div-ten"><span class="one">我是10px</span><span class="two">我是12px</span></div><p>11. ie8中變量與id沖突時， 必須用var聲明變量否則會報錯，firefoxhe chrome則不會。</p><div class="div-eleven"><p id="eleven"> 我的id是eleven</p><img src="./images/varId.png"></div><hr><p>12. flash遮擋住頁面中元素 <a href="http://blog.csdn.net/ajaxuser/article/details/6669628">參考</a></p><p><pre><code>&lt;object&gt;&lt;param name="wmode" value="opaque"&gt;&lt;embed wmode="opaque"&gt;&lt;/embed&gt;&lt;/object&gt;</code></pre></p><hr><p>13. IE8 不支持bind this</p><p><a href="http://www.tuicool.com/articles/Mr6nMj7">一行代碼輕松搞定各種IE兼容問題</a></p><p>加上這句也是蠻好用的 <code>&lt;meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/&gt;</code></p><p>14.用jquery-1.7.1.min.js 漢字可能會亂碼， 改用jquery-1.9.1.min.js (還是1.8忘記了。。。)</p><p>不支持footer(應該是h5)</p><div class="footer"><footer></footer></div><script type="text/javascript" src='./js/jquery-1.7.1.min.js'></script><script type="text/javascript" src='./js/placeholder.js'></script><script type="text/javascript">$(function() {//$('input, textarea').placeholder();$('input.button').click(function(){document.location = $(this).parents('a').first().prop('href');});var str = "我 是 空 格 ";console.log($.trim(str));//console.log(str.trim());var eleven；//eleven = $('#eleven').text(); //報錯var eleven = $('#eleven').text();console.log(eleven);});</script> </body> </html> .div-one {width: 600px;height: 100px; } .div-one select{ width: 200px;height: 40px;margin: 0 10px;/*IE的盒子模型*/ } .div-one .select-one {padding: 10px;border: 1px solid red;margin-bottom: 10px; } div[class^='circle'] {width: 100px;height: 100px;margin-top: 20px;margin-left: 20px;border: solid 1px red;behavior: url(./PIE.htc);/*支持IE8圓角 不行就加position:relative; 再不行就加z-index: 10*/border-radius: 50px;display: inline-block; } .circle-two {background: url(../images/circle.jpg); } /*margin 失效*/ .div-three {width: 200px;height: auto;margin: 20px; } .div-three .margin-one, .div-three .margin-two{width: 50px;height: 50px;float: left;margin: 5px } .div-three .margin-three {width: 110px;height: 50px;margin: 5px 0 0 5px;clear: both;background: #50C66C; } .div-three .margin-one { background: #51718E;} .div-three .margin-two { background: #8E518A;} .div-seven a img{width: 200px;height: 100px;margin: 20px; } .div-ten .one {font-size: 10px;display: inline-block;margin-right: 20px; } .div-ten .two {font-size: 12px; } .footer {width: 100%;height: 100px;background: #ECEBF3;border-radius: }

下載地址

鏈接：https://pan.baidu.com/s/1IpnSTXeJAn93urUHjWEAqQ 密碼：fx5e

有用的小伙伴，麻煩給點激勵噠~~~
點贊or評論，隨便砸~

總結

以上是生活随笔為你收集整理的IE8兼容性问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。