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

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

1：li邊距“無(wú)故”增加

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

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

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

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

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

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

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

/*IE6 專用 */

.content {culor:red;}

/* 其他瀏覽器 */

div>p .content {culor:blue;}

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

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



sp;{culor:blue;}

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

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

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

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

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

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

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

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

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

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

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

比如說(shuō)點(diǎn)擊查看詳情之類的，代碼形如：

<a href=”#” title=”點(diǎn)擊查看詳情”>鏈接xx</a>

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

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

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

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

</a>

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

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

16：如何去掉點(diǎn)擊鏈接時(shí)的虛線 解決方案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等瀏覽器的話可這樣寫(xiě) a{ouline:none;}

17:制作1px細(xì)線表格

解決方案1 ( 推薦)：我們只要給這個(gè)table一個(gè)border-cullapse:cullapse的樣式，就可以達(dá)到這個(gè)效果了。
具體如下：
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無(wú)效

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

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

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

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

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

<div></div>

對(duì)應(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;}

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

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

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

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

<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了，層級(jí)夠高吧，但是，看下面的圖：

這一對(duì)比就知道問(wèn)題了，可能有人會(huì)疑問(wèn)，這會(huì)不會(huì)是IE6的relative自己感冒了，而不是浮動(dòng)(float)攜帶 了“甲流病毒”。好，我現(xiàn)在去掉浮動(dòng)，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下：

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

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

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

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

好，下面展示這個(gè)bug。

條件很簡(jiǎn)單，只要絕對(duì)定位的第一個(gè)元素的第一個(gè)爸爸，或者說(shuō)是最老的那個(gè)爸爸級(jí)別的人的relative屬性小于黑色半 透明層的z-index層級(jí)。例如下面的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 是絕對(duì)定位，層級(jí)9999，比1大多了，絕對(duì)定位的父標(biāo)簽層級(jí)1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可 憐的IE6童鞋——

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

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

知道原因解決就很輕松了，給第一任老爸添加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童鞋喜笑顏開(kāi)，春光燦爛：

19：css reset中的list-style:none

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

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

今天在做一個(gè)Timeline的模塊的時(shí)候遇到一個(gè)棘手的問(wèn)題： 給元素添加display:inline-block 屬性的時(shí)候會(huì)產(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;
}

頁(yè)面渲染結(jié)果：

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

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

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