IE常見bug及其修復方法

時間 2019-11-13

標籤常見 bug 及其修復方法简体版

原文原文鏈接

1、雙邊距浮動的bug

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

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

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

修復方法在浮動元素上添加display:inline屬性便可前端

2、3像素文本偏移bug

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

<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;
}

效果web

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

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

3、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下效果app

.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");
}

4、浮動層錯位

當內容超出外包容器定義的寬度時會致使浮動層錯位問題。在 Firefox、IE七、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; }

5、IE6調整窗口大小的bug

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

6、無DOCTYPE引發的bug

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

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

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

7、列表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;
}

效果

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

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

8、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;
}

效果

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

修復方法2、給標籤a,設置浮動,而且清除浮動 ul li a { display: block;float: left;clear: left; }

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

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

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

9、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;            
}

10、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")路徑要同樣，而且是絕對路徑能夠是相對路徑

11、父元素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屬性便可