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

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

1.浮動下margin翻倍問題（很典型，估計大家都知道了）。

div {float: left; width: 100px; margin: 10px; display: inline;}

　　只需在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>

<style type="text/css">
            .container {width: 290px; border: 1px solid red; padding-bottom: 8px;}
            .welcome {height: 40px; line-height: 40px; margin: 0 15px; border-bottom: 1px solid #DDDDDD; font-size: 14px;}
            .welcome .u-player {float: left;}
            .welcome .u-quit {float: right;}
            .welcome a:hover {text-decoration: underline; color: #ff6600;}
        </style>

　　ie6下面margin失效，只有當container定義width或者zoom：1或者height: 1%的情況下，margin才能起作用。

 

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

　　只需將display設置為block即可。

 

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

　　title下面包括"開心"、"所有"關鍵字時，ie6下為空白頁面（我暫時發現這兩個字），可以將關鍵字去掉或者將<title></title>放置在<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8”/>也可以恢復正常頁面。

 

5.ie6下面z-index失效問題（這個問題我糾結了很久……）。

　　　　　　  .wrapper {width: 1200px; margin: auto;}
            .side {position: relative; z-index: 2; float: left; width: 240px; height: 300px; background: #000000;}
            .main {float: right; width: 710px; height: 500px; background: blue;}

            /* 查找區服 */
            .search {position: relative; z-index: 2; }
            .search span {display: inline-block; width: 120px; line-height: 30px; background: red; text-align: center; color: white;}
            .all-server {position: absolute; left: 200px; width: 200px; height: 400px; background: #696969;}
            .all-server ul li a {color: white;}

            /* 滾動圖片 */
            .slide ul {position: relative; width: 900px; }
            .slide ul li {float: left; width: 400px;}
            .slide ul li img {width: 400px;}

<!-- ie下面z-index失效 -->
        <div class="wrapper clearfix">
            <div class="side"> <!-- 需要給side設置position：relative和z-index：2,這不是追蹤到父級，而是父級的父級的父級，追蹤了三層 -->
                <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="http://imgs2.mxthcdn.com/d/I26gkb868263768568468_eZDLVE.jpg"/></li>
                        <li><img src="http://imgs2.mxthcdn.com/d/I26gkb868263768568468_eZDLVE.jpg"/></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 {position: fixed; bottom: 0; width: 100%; line-height: 100px; background: #000000; color: white; font-size: 20px; text-align: center;}

<!--[if IE 6]>
        <style type="text/css">
                /* 兼容IE6 */
            .footer{ _position: absolute; _top: expression(documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight);
            }
            * html,* html body{background-image:url(about:blank);background-attachment:fixed;} /* 防止滾動條滾動時閃爍 */

        </style>
        <![endif]-->

 

<!-- 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)) {

       console.log(” I’m ie6!” );         

}