當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

IE常见bug及其修复方法

發布時間：2024/8/1 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 IE常见bug及其修复方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? 一、雙邊距浮動的bug

1.1一段無錯的代碼把一個居左浮動(float:left)的元素放置進一個容器盒(box)

2.1在浮動元素上使用了左邊界(margin-left)來令它和容器的左邊產生一段距離

在ie6或更低版本中產生雙倍外邊距

修復方法?在浮動元素上添加display:inline屬性即可

? ? 二、3像素文本偏移bug

2.1 一段文本與浮動元素相鄰的時候，會出現圖文環繞，為了不讓其文本環繞左邊floatBox浮動盒子，我們設置段落外左邊距margin-left為floatBox浮動盒子寬度

<div class="wrapper"><span class="floatBox"></span><p>When people ask me for advice on blogging, I always respond with yet another form of the same advice: pick a schedule you can live with, and stick to it.
Until you do that, none of the other advice I could give you will matter. I don’t care if you suck at writing. I don’t care if nobody reads your blog.
I don’t care if you have nothing interesting to say. If you can demonstrate a willingness to write, and a desire to keep continually improving your writing,
you will eventually be successful.</p> </div> .wrapper {width: 600px;border: solid deeppink 5px; } .wrapper p {margin:0 0 0 100px; /*不讓段落環繞floatBox*/ } .floatBox {background-color: greenyellow;float: left;width: 100px;height: 100px;display: inline;margin-right: -3px; }　　

效果

ie6或更低版本瀏覽器下產生段落文本與浮動元素間3像素bug

修復方法?為浮動層添加 display:inline 和 -3px 負值margin?

? ? 三、ie6 最小高度min-height不識別bug

?第一種方法?修復方法

.demo {min-height: 100px;height: auto !important;/*現代瀏覽器下，內容高度超過100px時自動獲得其高度*/height: 100px;/*此值設置和min-height值一樣，因為IE6下元素高度會根據內容自己的高度而定，所以內容高度低于min-height值時，為了達到min-height效果，需要給元素一個顯式的高度值*/ }

第二種?采用子選擇器方法來修復方法　?IE6是不支持子選擇器的，所以我們也可以使用這個方式來解決min-height在IE6下效果

.demo {min-height: 100px;height: 100px;} html>body .demo {height: auto;/*只有現代瀏覽器才能識別*/ }

補充于 2017-04-13?21:35:25

最小寬度min-width 兼容IE6寫法

/* min-width for IE6 */ * html div.min-width {width: expression(document.body.clientWidth < 301 ? "300px" : "auto"); } /* min-width for standards-compliant browsers */ div.min-width {min-width: 300px; }

最大寬度max-width 兼容IE6寫法

/* max-width for standards-compliant browsers */ div.max-width {max-width: 300px; } /*max-width for IE6*/ *html div.max-width {_height:expression(this.clientWidth > 299 ? "300px" : "auto"); }　　

最大高度max-height 兼容IE6寫法

/* max-height for standards-compliant browsers */ div.max-height {max-height: 300px; } /*max-height for IE6*/ *html div.max-height {_height:expression(this.scrollHeight > 301 ? "300px" : "auto"); }

? ? 四、浮動層錯位

當內容超出外包容器定義的寬度時會導致浮動層錯位問題。在 Firefox、IE7、IE8 及其他標準瀏覽器里,超出的內容僅僅只是超出邊緣;但在 IE6 中容器會忽視定義的 width 值,寬度會錯誤地隨內容寬度增長而增長。如果在這個浮動元素之后還跟著一個浮動元素,那么就會導致錯位問題

<div id="container"> <div id="left">http://net.tutsplus.com/</div> <div id="right"></div> </div> #container{ background: #C2DFEF; border: solid 1px #36F; width: 365px; margin: 30px; padding: 5px; overflow: auto; } #left,#right{ background: #95CFEF; border: solid 1px #36F; width: 100px; height: 150px; margin: 30px; padding: 10px; float: left; }　　

效果

修復方法在浮動元素上添加 overflow:hidden 即可

#left { overflow: hidden; }

? ? 五、IE6調整窗口大小的bug

當把body居中放置，改變IE瀏覽器大小的時候，任何在body里面的相對定位元素都會固定不動了。解決辦法：給body定義 position:relative;就行了

? ? 六、無DOCTYPE引起的bug

html頁面頭部，若不添加?<!doctype html>?這一句，會導致各個瀏覽器會根據自己的行為去理解網頁，即?ie瀏覽器會采用?ie?標準?w3c盒子模型去解釋你的盒子，

而?ff會采用標準w3c?標準?w3c盒子模型解釋你的盒子；

若添加假如加上了?<!doctype html> ??聲明，那么所有瀏覽器都會采用標準?w3c盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致

? ? 七、列表li樓梯bug

無需列表li中放置元素（內聯元素 a）設置浮動，li不設置浮動

<ul><li><a href="#">Item Stairs Bug</a></li><li><a href="#">Item Stairs Bug</a></li><li><a href="#">Item Stairs Bug</a></li> </ul> ul {list-style: none;margin: 0;padding: 0; } ul li a{width: 150px;height: 30px;line-height: 30px;margin: 0 10px;text-align: center;color: #FFF;text-decoration: none;float: left;background-color: #00aabb; }

效果

修復方法一、為列表元素li添加浮動?li { float:left; }?

修復方法二、為列表元素li添加display屬性值inline ?li { display:inline;}?

? ? 八、li空白間隙

直接上代碼

<ul><li><a href="#">white space </a></li><li><a href="#">white space</a></li><li><a href="#">white space</a></li> </ul> ul {list-style: none;margin: 0;padding: 0; } ul li a{display: block;background-color: #f36696;color: #FFF;text-decoration: none; }

效果

修復方法一、給標簽a定一個寬度,讓聲明的寬度來觸發IE瀏覽器hasLayout,或者給定一個寬度?ul li a { width:100px; }?

修復方法二、給標簽a,設置浮動,并且清除浮動??ul li a { display: block;float: left;clear: left; }?

修復方法三<推薦>、給標簽a父級標簽li的display屬性設置inline?

ul li {display:inline; } ul li a {display:bloack; }　

?修復方法四、為每個li設置一個低實現<不推薦使用>?ul li { border-bottom: solid 1px #00aabb;}?

? ? 九、IE6的"藏貓貓"bug

"藏貓貓"（peek-a-boo）在IE6是一個很奇怪而且很煩人的bug,之所以起這個名字是因為在某些條件下文本看起來消失了，只有在重新加載頁面時文本才出現

出現該bug條件

1.一個浮動元素后面跟著一個非浮動元素,然后是清理元素

2.條件1中所有元素包含在一個設置了背景顏色與圖像的父元素中

3.清理元素碰到浮動元素，中間非浮動元素消失了，隱藏到父元素的背景顏色或圖片的后面，只有在重新刷新頁面時重新出現（如下圖所示）

修復方法、避免浮動元素與清理元素接觸，使用清除浮動clearfix

.clearfix:after {visibility: hidden;overflow: hidden;display: block;content: ".";clear: both;height: 0; line-height: 0; font-size: 0; } * html .clearfix {zoom: 1; } *:first-child + html .clearfix {zoom: 1; }　　

? ? 十、IE瀏覽器部分版本不支持background-size的bug

background-size是CSS3新增的屬性; background-size用來調整圖片指定的大小，大小會由所在其區域寬度和高度決定及background-origin 的位置決定;

很多瀏覽器都支持屬性，但IE瀏覽器就不支持該屬性了

?background-size兼容性

? ?IE8及IE以下瀏覽器和遨游不支持；
? ?Firefox 添加私有屬性 -moz-background-size 支持；
? ?Safari 和 Chrome 添加私有屬性 -webkit-background-size 支持；
? ?Opera 不支持 background-size 屬性，添加其私有屬性 -o-background-size 也不支持

修復方法代碼如下

.bg {background: url("../images/login-bg.png") left top no-repeat;background-size: 100% 100%;-moz-background-size:100% 100%;-webkit-background-size:100% 100%;-o-background-size:100% 100%;/*注意這background-image: url 與 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale")路徑要一樣，并且是絕對路徑 */background-image: url("http://localhost:8080/OA/plug-in/login/images/login-bg.jpg");background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://localhost:8080/OA/plug-in/login/images/login-bg.jpg", sizingMethod="scale"); }

注意這background-image: url 與 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale")路徑要一樣，并且是絕對路徑可以是相對路徑

? ? 十一、父元素overflow:auto與position:relative 屬性相遇bug

為overflow父元素子元素中添加?position:relative后，在IE6中出現不能裁剪bug

<div class="wrapper"><div class="box"></div> </div> .wrapper {height: 150px;width: 150px;background-color: #8ce29b;overflow: auto; } .box {width: 100px;height: 200px;margin: 25px;position: relative;background-color: #ff9890; }

修復方法 ?為overflow父元素添加position: relative屬性即可

? ? 十二、使用?HTTP meta 的 IE=edge標記

在<head>中添加?<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

此處這個標記后面竟然出現了chrome這樣的值，難道IE也可以模擬chrome了？
意思是不是微軟增強了IE，而是谷歌做了個外掛：Google Chrome Frame（谷歌內嵌瀏覽器框架GCF）。

這個插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，而且支持IE6、7、8等多個版本的IE瀏覽器，谷歌這個墻角挖的真給力！

X-UA-Compatible? 是針對IE8的一個設置，只有IE8能識別，為IE8指定不同的頁面渲染模式(標準)

這樣做的效果是：?如果安裝了GCF，則使用GCF來渲染頁面，如果未安裝GCF，則使用最高版本的IE內核進行渲染

作者：Avenstar

出處：http://www.cnblogs.com/zjf-1992/p/6691816.html

關于作者：專注于前端開發、喜歡閱讀

本文版權歸作者所有,轉載請標明原文鏈接

【資料參考】

http://liuyu405.iteye.com/blog/478269

http://www.w3cplus.com/css/ten-most-common-ie-bugs-and-how-to-fix-them-part-3

http://www.w3cplus.com/ten-most-common-ie-bugs-and-how-to-fix-them-part-2

http://www.w3cplus.com/css/ten-most-common-ie-bugs-and-how-to-fix-them-part-1

http://www.tuicool.com/articles/a2QNF3

精通CSS 高級WEB標準解決方案（第2版）

http://www.oschina.net/question/54100_17414

http://lightcss.com/add-x-ua-compatible-meta-to-your-website/

轉載于:https://www.cnblogs.com/zjf-1992/p/6691816.html

總結

以上是生活随笔為你收集整理的IE常见bug及其修复方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Linux启动系统时不启动防火墙,Lin
下一篇： python 大智慧自定义数据_利用EX