昨天做邊框圓角的時候發現乙個bug。
這個bug實際上出現在ie6以下版本的ie瀏覽器上。
出現情況在：
1.外層元素用position:relative定位，並且實際content寬/高為奇數；
2.內層元素使用position:absolute定位，並且使用了bottom/right定位。
仔細看下面兩個情況有什麼不同（要使用ie6以下瀏覽器，其他瀏覽器不會出現該bug）：
.obj
(1)神奇的1px
(2)神奇的1px
這是使用的**：
code
<
style
type
="text/css"
>
.obj
style
>
(1)<
div
class
>
19px
<
br>
38px
<
br>
57px
<
div
class
="obj"
>
神奇的1px
div>
div>
(2)<
div
class
>
19px
<
br>
38px
<
div
class
="obj"
>
神奇的1px
div>
div>
眼尖的你可能發現了，在(2)中內層div可以按預期的bottom定位定位到父元素的最底部。而(1)中卻出現了bottom:1px的定位效果。
這就是所謂的 神奇的1px 了。
區別就在於(1)中父元素的高為19*3=57px，而(2)中父元素的高為19*2=38px，奇數與偶數的區別。
我們構造下面乙個例子：
.obj
(3)(4)
**：code
<
style
type
="text/css"
>
.obj
style
>
(3)<
div
class
>
<
div
class
="obj"
>
神奇的1px
div>
div>
(4)<
div
class
>
<
div
class
="obj"
>
神奇的1px
div>
div>
可以清楚地看到，(4)中的bottom和right定位都出現了類似的問題，而(3)中不會。(3)和(4)的區別就在於width和height的奇偶區別。
也就是說，當外層content高或寬(測試過padding對此沒有影響)為奇數時，bottom和right的絕對定位會出現+1px的偏差。
IE6絕對定位的bug及其解決辦法
position absolute定位在ie6下存在left和bottom的定位錯誤問題 zzsky zzsky 上面這段 在ie6中定位錯誤。解決辦法有兩種 1 給父層設定zoom 1觸發layout zzsky 2 給父層設定寬度 width zzsky 下面的這段 在ie6下，bottom定位...
css 絕對定位的元素在 ie6 下不顯示
問題描述 在 ie6 中如果乙個浮動元素與絕對定位元素相鄰的話，在某些情況下絕對定位元素將會消失。產生原因 只有當絕對定位元素的鄰近浮動元素的寬度大於父層寬度減 3 時 即如果父層寬度是 300px，浮動元素的寬度大於 297px 該絕對定位元素在 ie6 下面會隱藏。html doctype ht...
css 絕對定位的元素在ie6下不顯示
問題描述 在 ie6 中如果乙個浮動元素與絕對定位元素相鄰的話，在某些情況下絕對定位元素將會消失。產生原因 只有當絕對定位元素的鄰近浮動元素的寬度大於父層寬度減 3 時 即如果父層寬度是 300px，浮動元素的寬度大於 297px 該絕對定位元素在 ie6 下面會隱藏。html doctype ht...