position:relative\absolute
在IE下:position:absolute;position:relative;之間的關系是遵循父級子級關系;即,最末級div尋找上一級容器的坐標以此為基准定位自身坐標值(top,left,right,bottom)
如下:a的直接子級是b、d,c是b的直接子級,c是a的子子級,b和d屬於同級。因此在IE中c的定位基於b,b和d的定位基於a。a直接影響b間接影 響c。c的准確定位顯示會是a的定位+b的定位=c的定位。b和d屬於同級,它們的定位是基於a的,因此在坐標值都是0的情況下,b和d是重疊的。
<div style="position:relative" id="a">
<div style="position:absolute" id="b">
<div style="position:absolute" id="c">
</div>
</div>
<div style="position:absolute" id="d">
</div>
</div>
在Firefox中這點的表現和IE是相同的。
在Chrome中就有所不同。
不同之處是:1、當定位坐標值是使用負值,如left:-30px;這個時候IE下就會被父容器的容積限制中,父容器會掩蓋住子容器。因為子容器的定位超出了父容器的容積。在Chrome中不會出現掩蓋的情況。
2、在Chrome中以上div之間的關系就有些微妙了。雖然表面上看還是a的直接子級是b、d,c是b的直接子級,c是a的子子級,b和d屬於同級。但 是他,它們定位的時候所有設置為position:absolute都會尋找上一級是否設置的是position:relativ它們以距離自己最近的 position:relativ為標准容器進行坐標值定位。即b、c、d、都基於a定位,c的定位不受b這個父級的限制。
基於以上兩點,這個時候對IE和Chrome做兼容的時候就有問題了。因為IE中c的定位=a的定位+b的定位 而 Chrome中c的定位僅基於a ,和b這個直接父級的定位沒有關系。因此在寫定位(top,left,right,bottom)的時候就要給出不同的值了。
width:auto\100%
在IE中當我給div設置了width:100%並且同時設置了border:#333 solid 1px 這時IE瀏覽器出現了橫向滑塊。而Firefox和Chrome並沒有出現橫向滑塊。究其原因:IE中border的設置是外描邊,Firefox和 Chrome設置是內描邊,不同就是外描邊是加上而內描邊是減去。本身width已經是100%的顯示四邊再加上1px超出了瀏覽器的容積所以就出現滾動 條了。因為IE和Firefox中div寬度默認就是充滿容器的所以兼容就要寫width:100%;\*Chrome*\ *width:auto;\*IE7,8 Firefox*\ -width:auto;\*IE6*\
display:block\none
在寫a標記的時候經常會用到display:block 給a設置了display:block即使是不加<br/>也會換行。
在IE、Firefox、Chrome中display:block會充滿父容器促使換行,這都是很正常的。不正常的是父容器的position是 absolute時,並且父容器也沒有設置固定寬度的時候IE、Firefox會將父容器也充滿。並不是按照a的內容的寬度擴充容器的容積。Chrome 則是按照a的內容的寬度來擴充容器的。這個時候想要幾個瀏覽器顯示一致就要給父容器一個固定寬度了。
