瘋狂抨擊ie6下各種扭曲行為

2022-02-22 06:51:12 字數 3663 閱讀 9933

從開始接觸ie6就被它強大的力量給震住了,雖然它很可怕,但是我總歸得想方設法把它給扼殺在搖籃外。以下是我在ie6下面碰到的一些扭曲行為,弱弱的把它給乾掉!!!

1.浮動下margin翻倍問題(很典型,估計大家都知道了)。

div
只需在div中新增display: inline;這個問題就迎刃而解了。

2.margin失效問題。

<

div

class

="container"

>

<

div

class

="welcome"

>

<

a href

="#"

class

="u-player"

>玩家

a><

a href

="#"

class

="u-quit"

>退出

a>

div>

div>

ie6下面

margin

失效,只有當

container

定義width

或者zoom:1

或者height: 1%

的情況下,

margin

才能起作用。

3.ie6下text-indent導致標籤消失。

只需將display

設定為block

即可。4.i

e6下title關鍵字和位置導致頁面為空白。

title下面包括"開心"、"所有"關鍵字時,ie6下為空白頁面(我暫時發現這兩個字),可以將關鍵字去掉或者將放置在」

content-type

」content=

」text/html;charset=utf-8

」/>也可以恢復正常頁面。

5.

ie6下面z-index失效問題(這個問題我糾結了很久……)。

float:left;width:240px;height:300px;background:#000000;}.main

/*查詢區服

*/.search .search span .all-server .all-server ul li a

/*滾動 */

.slide ul .slide ul li .slide ul li img

<

div

class

>

<

div

class

="side"

>

<

div

class

="server"

>

<

div

class

="search"

>

<

span

>所有區服

span

>

<

div

class

="all-server"

>

<

ul>

<

li><

a href

="#"

>444服-大幅度發

a>

li>

<

li><

a href

="#"

>444服-大幅度發

a>

li>

<

li><

a href

="#"

>444服-大幅度發

a>

li>

<

li><

a href

="#"

>444服-大幅度發

a>

li>

<

li><

a href

="#"

>444服-大幅度發

a>

li>

<

li><

a href

="#"

>444服-大幅度發

a>

li>

<

li><

a href

="#"

>444服-大幅度發

a>

li>

ul>

div>

div>

div>

div>

<

div

class

="main"

>

<

div

class

="slide"

>

<

ul>

<

li><

img

src=""

/>

li>

<

li><

img

src=""

/>

li>

ul>

div>

div>

div>

all-server所有區服是絕對定位,slide滾動中ul是相對定位。看文件說在ie6下面只需將所有區服父級設定position:relative和z-index:2(只要高過slide中即可),但是最後發現這樣設定是無效的。只有在side標籤中設定position:relative和z-index:2才能起作用,也就是追蹤了三層,all-server的父級是search,父級的父級是server,父級的父級的父級才是side,那是什麼引起要追蹤這麼多層呢?原來是float:left引起的,我只要將float:left去掉,就可以實現all-server父級的z-index比slide的高即可,原來是浮動講這個帶入到坑中。。。

6.ie6下面絕對定位到頂部。

.footer

<

div

class

="footer"

>

i'm footer!

div>

除了ie6,其他瀏覽器絕對定位只要用position:fixed,就可以定位到預設位置,而ie6不行,它不識別fixed這個東西,它只能用absolute來定位。documentelement.scrolltop表示滾動條以上的內容(也就是上部肉眼看不到的文件內容), document.documentelement.clientheight表示該標籤上部內容,不包括看不到的文件內容, this.offsetheight表示自己的高度,用滾動條上部看不到文件+看得到文件-自己高度不就可以實現footer為最底部了麼?

7.js判斷ie6瀏覽器。

if ('undefined' == typeof

(document.body.style.maxheight))

IE6下的效果

1.ie6有寬度border實現透明 如果想使得邊框顏色透明,在其餘瀏覽器下比較簡單,直接使用 border color transparent 但在ie6下這個辦法不行,可以通過下面的方式實現 border color tomato filter chroma color tomato 或者 bo...

IE6下position fixed的bug解決

參考文章 http www.qianduan.net fix ie6 dont support position fixed bug.html 頂部固定 在相應 div的 css中新增 下劃線只能被 ie6識別 position absolute bottom auto top expression...

ie6下height高度問題

無標題文件 title 6head 78 body 9 div style background blue height 8px div 10body 11html 複製 意思是定義乙個高度為8px,藍色背景的div,但是造成ie6.0下多出來高度.以前我解決ie6.0下出現的這種問題的方法是加ov...