有些同學(xué)在自己制作網(wǎng)站時，出現(xiàn)網(wǎng)站在火狐瀏覽器、谷歌瀏覽器顯示正常，但在IE6、IE7瀏覽器卻出現(xiàn)移位，錯亂的現(xiàn)象，這就是由于網(wǎng)站對IE6、IE7瀏覽器不兼容造成的。

如何解決自己做網(wǎng)站時出現(xiàn)IE6、IE7瀏覽器不兼容的問題呢？下面是幾個常見的IE6、IE7瀏覽器不兼容網(wǎng)站的解決方法：【使用以下的方法之前，需了解HTML和CSS，如果不了解，請學(xué)習(xí)html視頻教程和CSS視頻教程】

1：li邊距“無故”增加

任何事情都是有原因的，li邊距也不例外。

先描述一下具體狀況：有些時候li邊距會突然增 加很多，值也不固定（只在IE6/IE7有這種現(xiàn)象），讓人摸不著頭腦，仔細“研究”發(fā)現(xiàn)是由于其低級元素ul的padding引 起，padding的上下值對li有影響，左右無影 響。

所以只好笨手笨腳地把padding去掉，換成margin。這是能解決問題，但往往不是我們想要的結(jié)果，或許 還會引起其他不必要的怪現(xiàn)象。

現(xiàn)在終于發(fā)現(xiàn)解決這個問題的方法，其實很簡單，既然是有ul引 起的，就設(shè)置ul的顯示形式為*display:inline-block;即可，前面加*是只 針對IE6/IE7有效，其他瀏覽器并不渲染這個屬性。

2：分頁數(shù)字 字體用“Arial ”加粗不抖動

3：IE6 CSS選擇器區(qū)分IE6

IE6不支持子選擇器；先針對IE6使用常規(guī)申明CSS選擇器，然后再用子選擇器針對IE7+及其他瀏覽器。

/*IE6 專用 */

.content {culor:red;}

/* 其他瀏覽器 */

div>p .content {culor:blue;}

4：IE6最小高度
IE6 不支持min-height屬性，但它卻認為height就是最小高度。解決方法：
使用ie6不支持但其余瀏覽器支持的屬性!important。

#container{min-height:200px; height:auto !important; height:200px;}



sp;{culor:blue;}

5：IE6100% 高度
在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得
先給html和body定義height:100%;。 n>
sp;{culor:blue;}

6：IE6躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素，如果在他之后有不浮動的內(nèi)容，并且有一
些定義了:hover的鏈接，當(dāng)鼠標(biāo)移到那些鏈接上時，在IE6下就會觸發(fā)躲貓貓。
解決方法很簡單：
1.在（那個未浮動的）內(nèi)容之后添加一個<span style="clear: both;"> </span>
2.觸發(fā)包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;

7:IE6絕對定位元素的1像素間距bug
IE6下的這個錯誤是由于進位處理誤差造成（IE7已修復(fù)），當(dāng)絕對定位元素的父元素高或?qū)挒槠鏀?shù)時，bottom和right會
產(chǎn)生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值，但對于液態(tài)布局沒有完美的解決方法。

8: IE下z-index的bug
在IE瀏覽器中，定位元素的z-index層級是相對于各自的父級容器，所以會導(dǎo)致z-index出現(xiàn)錯誤的表現(xiàn)。解決方法是給
其父級元素定義z-index，有些情況下還需要定義position:relative。 ?決方法。

9: Overflow Bug
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上
position:relative;。

10: 橫向列表寬度bug
如果你使用float:left;把<li>橫向擺列，并且<li>內(nèi)包含的<a>（或其他）觸發(fā)了 hasLayout，在IE6下就會有錯誤的
表現(xiàn)。解決方法很簡單，只需要給<a>定義同樣的float:left;即可。

11: 列表階梯bug
列表階梯bug通常會在給<li>的子元素<a>使用float:left;時觸發(fā)，我們本意是要做一個橫向的列表(通常 是導(dǎo)航欄)，
但IE卻可能呈現(xiàn)出垂直的或者階梯狀。解決辦法就是給<li>定義float:left;而非子元素<a>，或者 給<li>定義
display:inline;也可以解決。

12: 垂直列表間隙bug
當(dāng)我們使用<li> 包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條列表元素（<li>）之間添加空隙。
解決方法：把<a>flaot并且清除float來解決這個問題；另外一個辦法就是觸發(fā)<a>的hasLayout（如定 義高寬、
使用zoom:1;）；也可以給<li> 定義display:inline;來解決此問題；另外還有一個極有趣的方法，給包含的文
本末尾添加一個空格。

13: IE6調(diào)整窗口大小的 Bug
當(dāng)把body居中放置，改變IE瀏覽器大小的時候，任何在body里面的相對定位元素都會固定不動了。解決辦法：
給body定義position:relative;就行了。

14: 文本重復(fù)Bug
在IE6中，一些隱藏的元素（如注釋、display:none;的元素）被包含在一個浮動元素里，就有可能引發(fā)文本重復(fù)bug。
解決辦法：給浮動元素添加display:inline;。

15：鏈接a的title屬性中的文字換行 我們都知道，可以給鏈接a加上title屬性，這樣鼠標(biāo)移動上去會顯示title屬性定義的 文字，常常用來加一些提示語句，

比如說點擊查看詳情之類的，代碼形如：

<a href=”#” title=”點擊查看詳情”>鏈接xx</a>

。之前一直沒有仔細注意過這個東西。如果鼠標(biāo)浮動上去要顯示更多東西的話，怎么實現(xiàn)呢。第一 反應(yīng)是jquery的toultip插件。今天無意中發(fā)現(xiàn)某個學(xué)院的網(wǎng)站鼠標(biāo)移動上去可以顯示這么完整的信息，效果看起來似乎還可以，就想看看怎么做的， 找了下，沒發(fā)現(xiàn)有Javascript腳本，再往鏈接的地方一看，終于讓我發(fā)現(xiàn)了門道了：

<a href='#' target="_blank" title="標(biāo)題: 關(guān)于對我校2006年至2009年發(fā)展黨員工作情況進…

發(fā)布日期: 2010-5-31 16:05:08類別：院務(wù)通知 點擊: 139">

[05-31] 關(guān)于對我校2006年至2009年發(fā)展黨員工作情況進…

</a>

注意到了嗎。。很簡單，只要使用 這樣的轉(zhuǎn)義符號,即可實現(xiàn)換行。在一些toultip要求定制性不高的情況下，這樣的顯示效果相 當(dāng)不錯，而且是瀏覽器原生的效果，安逸。

哎，雖然號稱精通div+css，但是發(fā)現(xiàn)一些小小但是很實用的技巧自己還不知道，看來html還有很多東西可以挖掘。

16：如何去掉點擊鏈接時的虛線 解決方案1：在<a this.blur()> Mike blog</a>
解決方案2：在標(biāo)簽中加入 hidefocus<a hidefocus> Mike blog</a>
解決方案3: 如果連接太多，可以用外部鏈接 .HTC 文件。如，blur.htc
文件內(nèi)容如下：

<public:attach event="onfocus"

onevent="makeblur()"></public:attach>



<SCRIPT language=javascript>

function makeblur(){

this.blur();

}

</SCRIPT>

在 CSS 中加入如下代碼：

A { behavior:url(blur.htc); }

解決方案4 ( 推薦 )：使用CSS樣式，可加入代碼：a {blr:expression_r(this.onFocus=this.blur())}

如果是FF等瀏覽器的話可這樣寫 a{ouline:none;}

17:制作1px細線表格

解決方案1 ( 推薦)：我們只要給這個table一個border-cullapse:cullapse的樣式，就可以達到這個效果了。
具體如下：
1、HTML結(jié)構(gòu):

<table width="300" border="1" cellpadding="0"cellspacing="0" borderculor="#C0C0C0"

style="border-cullapse:cullapse;">

<tr>

<td> </td>



<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

18：IE6 下z-index無效

在CSS中，通過z-index這個屬性改變層級，要讓z-index起作用有個前提，就是元素的position屬性要 是 relative，absulute或是fixed。

z-index層級越高，內(nèi)容越應(yīng)該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實如此，但是不絕對，尤其遇到IE6。

1、關(guān)于效果截圖的些必要說明

下面的不是廢話，是為了更容易的理解我下面唾沫橫飛的內(nèi)容。

以下所有結(jié)果截圖的大背景如下：
1、頁面上固定不動的，一成不變的，送豪宅也不會從良的是一個黑色背景，透明度 40%，幾乎滿屏顯示的層級為1的絕對定位層。HTML為：

<div></div>

對應(yīng)CSS 為：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absulute; left:0; top:0; z-index:1;}

作用是為了讓層級關(guān)系一目了然�？矗�

這說明內(nèi)容在z-index為1的絕對定位層之下。
這說明內(nèi)容在z-index為1的絕對定位層之上。

2、頁面上做對比的是美女圖片，圖片在半透明黑色絕對定位層的上面還是下面很容易辨別，這樣，您就能夠?qū)ξ宜�說的z- index不起作用有很直觀的認識了。

2、IE6的抱怨：浮動讓我沉淪
現(xiàn)在開始真正的講述 問題的產(chǎn)生，原因以及解決了。首先講講第一種z-index無論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個：1、父標(biāo)簽 position屬性為relative；2、問題標(biāo)簽無position屬性（不包括static）；3、問題標(biāo)簽含有浮動(float)屬性。
您 可以拿下面的代碼自己做個簡單測試：

<div></div>

<div style="position:relative; z-index:9999;">

<img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />

</div>

丫的，這z-index都9999了，層級夠高吧，但是，看下面的圖：

這一對比就知道問題了，可能有人會疑問，這會不會是IE6的relative自己感冒了，而不是浮動(float)攜帶 了“甲流病毒”。好，我現(xiàn)在去掉浮動，HTML代碼如下：

<div></div>

?<div style="position:relative; z-index:9999;">

?<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />

?</div>

結(jié)果IE6下：

我想，問題應(yīng)該都清楚了，至于原因，我起初以為是haslayout搞的鬼，后來，用zoom一測試，發(fā)現(xiàn)不是（IE7 下無此bug也證明不是 haslayout的原因），似乎就是這個float會讓z-index失效。由于將外部div的position:relative屬性改為 absulute可以解決這一問題，我就懷疑是不是浮動讓relative發(fā)生了些變化，float與relative在水平定位上可以說是近親，會不會 是因為這兩者攪和在一起所以什么“畸形”“體弱多病”就出現(xiàn)了。這僅是我的猜測而已，真正的原因還是去問IE6的后媽吧。

解決方法，解決方法有三，1、position:relative改 為position:absulute；2、去除浮動；3、浮動 元素添加 position屬性（如relative，absulute等）。

3、固執(zhí)的IE6：它只認第一個爸爸
可能不少人知 道，這IE6下，層級的高低不僅要看自己，還要看自己的老爸這個后臺是否夠硬。用術(shù)語具體描述為：
父標(biāo)簽position屬性為relative 或absulute時，子標(biāo)簽的absulute屬性是相對于父標(biāo)簽而言的。而在IE6下，層級的表現(xiàn)有時候不是看子標(biāo)簽的z-index多高，而要看它 們的父標(biāo)簽的z-index誰高誰低。

有一定經(jīng)驗的人可能都知道上面的事實。但是，相信這里面很多人不知道IE6下，決定層級高低的不是當(dāng)前的父標(biāo)簽，而是整 個DOM tree（節(jié)點樹）的第一個relative屬性的父標(biāo)簽。有時平時我們多處理一個父標(biāo)簽，z-index層級多而復(fù)雜的情況不多見，所以難免會有認識上 的小小偏差。

好，下面展示這個bug。

條件很簡單，只要絕對定位的第一個元素的第一個爸爸，或者說是最老的那個爸爸級別的人的relative屬性小于黑色半 透明層的z-index層級。例如下面的HTML代碼：

<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absulute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>

可以看到，mm3圖片的父標(biāo)簽div 是絕對定位，層級9999，比1大多了，絕對定位的父標(biāo)簽層級1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可 憐的IE6童鞋——

再看看以Firefox為代表的其他童鞋：

IE7與IE6有著同樣的bug，原因很簡單，雖然圖片所在div當(dāng)前的老爸層級很高(1000)，但是由于老爸的老爸 不頂用，可憐了9999如此強勢的孩子沒有出頭之日��！

知道原因解決就很輕松了，給第一任老爸添加z-index后的HTML代 碼如下：

<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absulute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>

結(jié)果IE6童鞋喜笑顏開，春光燦爛：

19：css reset中的list-style:none

在IE6,7下,當(dāng)UL不具有float:left;display:inline;時:
無論有沒有l(wèi)ist-style:none這個屬性,列 表符都被隱藏,不占位置(下面代碼中的5,6)
當(dāng)UL具有float:left;display:inline;屬性時
list- style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);
未 設(shè)置list-style:none;列表符被隱藏,也不占位(list-style-position:outside)

在firefox中只要list-style-type為none ,則 無論list-stype-position的值為outside或 inside , list-style都能很好的被隱藏
而在IE6,7中,僅 設(shè)置list-style:none,并不足以解決所有問題
所以我認為在css reset的時候使用 list-style:none outside none 更好

20：鏈接去邊線（完全兼容）

a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

21: display:inline-block 額外產(chǎn)生的6PX 或者4px margin

今天在做一個Timeline的模塊的時候遇到一個棘手的問題： 給元素添加display:inline-block 屬性的時候會產(chǎn)生額外的 4px的margin-right。

原始代碼

.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;
background-culor:#00FF00;
position:relative;
}

頁面渲染結(jié)果：

每一列都會向右產(chǎn)生外邊距4px，苦思不得其解，嘗試負的外邊距，但是涉及到其他的問題:每個li標(biāo)簽會重疊1-2個px，妨礙到鼠標(biāo)hover 狀 態(tài)的事件。

標(biāo)簽： isp 代碼 谷歌 腳本 制作網(wǎng)站 自己制作網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。