瀏覽器的各種bug（一）

對於頁面工程師來說，最令人頭痛的瀏覽器是哪個？我相信有99%的人會選擇IE6，沒錯就是IE6。下面我就來介紹一些我遇到過的IE6BUG以及解決方法，當然也包括其他瀏覽器。

1、IE6雙邊距bug

當元素浮動並且同時有外邊距時，在IE6下會產生雙倍距離。（.content{float:left;margin-left:10px;}其他瀏覽器下左邊距是10px，IE6下左邊距是20px）

解決方法：display:inline;（.content{float:left;margin-left:10px;display:inline;}）

2、奇數寬高bug

在相對定位和絕對定位下，當外層相對定位的寬度或高度是奇數時，會產生這個bug。我們看下例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>奇數寬高bug</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .rel{width:501px;height:501px;position:relative;background:red;}
    .abs{width:200px;height:100px;position:absolute;background:yellow;right:0;bottom:0;}
    </style>
</head>
<body>
    <div class="rel">
        <div class="abs"></div>
    </div>
</body>
</html>

可以看出，黃色背景的div並沒有完全在右下角，下邊和右邊各留了1像素。

解決方法：將外層相對定位的div寬高改爲偶數即可。

3、IE6 position:fixed; 無效

如今很多頁面上都有分享的功能，我們可以發現隨着瀏覽器的滾動，位置並沒有變化，這是因爲使用了position:fixed;效果，但是在IE6下並不支持這個屬性。那怎麼辦呢？該如何實現這樣的效果呢？很簡單，在css中用表達式寫js來實現這個效果。

解決方法：

定位在左上角：
.ie6fixedLT{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop));}
 
定位在右上角：.ie6fixedRT{position:absolute;right:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop));}
 
定位在左下角：.ie6fixedLB{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
 
定位在右下角：
.ie6fixedRB{position:absolute;right:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
 
/* 修正ie6振動bug */
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}

4、IE6高度小於10像素bug

在IE6下有默認行高，這就使得高度小於10像素的塊級元素無法顯示正確的高度。

解決方法：給高度小於10像素的元素添加 font-size:0;overflow:hidden;

5、IE6最小高度

在IE6中，並不認識 min- 和 max- 前綴的寬度高度。但是有時我們做頁面的時候會用到，該如何解決呢？

解決方法：

方法一：用 js 來解決（不值得推薦）

.maxWidth{max-width:200px; width:expression(this.width > 200 ? '200px' : true);}
.minHeight{min-height:200px; height:expression(this.height < 200 ? '200px' : true);}

解決 expression 性能問題

.minWidth{min-width:200px; width:expression((function(o){o.style.width = (o.width < 200 ? '200px' : o.width);})(this));}

方法二：hack寫法（推薦）

.minHeight{height:auto !important;height:100px;min-height:100px;}

注意寫法的順序

6、IE6下div無法遮蓋select

舉個例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>div無法遮蓋select</title>
<style type="text/css">
.wrapper{position:relative;top:10px;left:26px;width:300px;height:300px;}
.box{position:absolute;top:0;left:50px;width:200px;height:200px;background:#FDF3D9;border:1px solid #EEAC53;}
</style>
</head>
<body>
<div class="wrapper">
    <select name="select" id="select">
        <option>測試選項</option>
        <option>測試選項2</option>
        <option>測試選項3</option>
    </select>
    <div class="box"></div>
</div>
</body>
</html>

產生的原因：在IE6下，瀏覽器將select元素視爲窗口級元素，這時div或者其他元素無論z-index設置有多高，都無法遮住select元素。

解決方法：在需要遮蓋的div中放入一個空的iframe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
.wrapper{position:relative;top:10px;left:26px;width:300px;height:300px;}
.box{position:absolute;top:0;left:50px;width:200px;height:200px;background:#FDF3D9;border:1px solid #EEAC53;}
.box iframe{display:block;position:absolute;top:0;left:0;z-index:1;width:200px;height:200px;filter:alpha(opacity=1);}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"><!--[if lt IE 7]><iframe src="" frameborder="0"></iframe><![endif]--></div>
    <select name="select" id="select">
        <option>測試選項</option>
        <option>測試選項2</option>
        <option>測試選項3</option>
    </select>
</div>
</body>
</html>

7、文字溢出bug（IE6註釋bug）

形成原因：

1、一個容器包含2個具有 float 樣式的子容器，且第一個子容器爲內聯元素

2、第二個容器的寬度大於父容器的寬度，或者父容器寬度減去第二個容器寬度的值小於3

3、在第二個容器前存在註釋（ie6註釋bug）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>文字溢出bug（IE6註釋bug）</title>
</head>
<body>
    <div style="width:400px;height:200px;">
		<div style="float:left;background:red;"></div>
		<!--註釋-->
		<div style="float:left;width:405px;background:#ccc;">重複文字測試</div>
	</div>
</body>
</html>

解決方法：

1、改變結構，不出現【一個容器包含2個具有float的子容器】的結構

2、減小第二個容器的寬度，使父容器寬度減去第二個容器寬度的值大於3

3、去掉註釋（推薦）

4、修正註釋的寫法。將寫成

5、將文字放入新的容器內（推薦）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>文字溢出bug（IE6註釋bug）</title>
</head>
<body>
    <div style="width:400px;height:200px;">
		<div style="float:left;background:red;"></div>
		<!--註釋-->
		<div style="float:left;width:405px;background:#ccc;"><span>重複文字測試</span></div>
	</div>
</body>
</html>

8、FF內部div使用margin-top，成爲外部div的margin-top

前面幾個都是介紹IE6下的bug，這次介紹FF下的bug

解決方法：display:inline-block;或者overflow:hidden;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>firefox內部div使用margin-top，成爲外部div的margin-top</title>
    <style>
        .clear{clear:both;}
        .a{border:1px solid red;}
        .b1{width:200px;height:130px;background:yellow;}
        .b2{width:200px;height:130px;background:yellow;display:inline-block;overflow:hidden;}
        .c{width:150px;height:100px;background:green;margin-top:30px;}
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b1"><div class="c">firefox內部div使用margin-top，成爲外部div的margin-top</div></div>
    <div class="clear"></div><br /><br />
    <div class="a"></div>
    <div class="b2"><div class="c">這下子正常了</div></div>
</body>
</html>

PS：博客搬家了，以後不再 CSDN 更新了，見諒。最新博客地址：http://www.cnblogs.com/yjzhu/

瀏覽器的各種bug（一）

1、IE6雙邊距bug

2、奇數寬高bug

3、IE6 position:fixed; 無效

4、IE6高度小於10像素bug

5、IE6最小高度

6、IE6下div無法遮蓋select

7、文字溢出bug（IE6註釋bug）

8、FF內部div使用margin-top，成爲外部div的margin-top

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

【Python】保存gym截圖

【譯】使用 GitHub Copilot 作爲你的編碼 GPS

Linux 服務器配置-安裝portainer-ce社區版

外行也能讀懂的網絡硬件設備功能原理速成

安裝Auto-GPT

前端攻城師所要掌握的知識和技能

複製剪貼板功能

blockUI彈出層

圖片左右滾動（可自動，有左右按鈕）

頁面製作規範文檔

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結