浮動屬性Float的跨瀏覽器案例解析：在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
|
浮動屬性Float的跨瀏覽器案例解析：在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
分類標籤: 跨瀏覽器相容性網頁設計
|
Moderator February 10, 2012 01:31AM 發表文章數: 1,228 |
1. 浮動屬性(Float)
1. 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
相異瀏覽器：FF、IE6、IE7、OP
問題描述：
使用float多欄式版面時，若以%為單位來設定所有欄的寬度，則在IE中有能因為瀏覽器視窗寬度不同，造成顯示混亂。
HTML中最後配置的欄位有可能因為視窗的寬度無法顯示到指定位置，於是就跑到其他欄位的下方。
要解決這個問題，一般會將各欄位的寬度設定為合計值比100%少一些，但除此之外也有其他的解決方法。
圖說：
將兩個寬度設為50%的DIV元素以float設為橫向並排，在IE中，根據視窗寬度不同，其中一欄可能會跑到其他欄的下方去。
解決方法：
1)使寬度合計起來比100%小一點。
依IE的版本的不同其臨界值也會不同，不過大致維持在96%以下，顯示起來就不會有問題，左右欄不設為50%，而設為48%的話，就不會發生其中一欄顯示到下方的情況。
但是顯示時在水平方向就會出現4%以上的留白，視版面設計不同，留白若全部在左邊或右邊，看起來會比較顯眼，因此多數網站在雙欄版面中，會將左右方開，一邊設定為float:left，另一邊則設為float:right，把留白放在中間。
2)在父元素中設定1px的padding。
前述的方法，可能造成版面看起來不自然，這時可採用另一種方法，就是將寬度合計為100%，僅加入padding來做處理。
在欄位全體之父元素box中，於和最後設定float之欄位鄰接的那一側，設定1px以上的padding，便可以解決問題。假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:lef的話，則只要在body元素中設定：padding-right:1px;，版面就能正常顯示了。
例如：
HTML程式碼：
<body>
<div id="main>
....
</div>
<div id="sub">
....
</div>
</body>
CSS程式碼
body{
padding-right:1px;
}
#main{
float:left;
width:50%
}
#sub{
float:left;
width:50%
}
3)在最後的欄位中設定-1px的margin。
假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:right的話，則只要在#sub元素中設定：margin-left:-1px;，版面就能正常顯示了。
反過來，若設定margin-right:-1px;則依瀏覽器的種類及版本不同，有可能出現水平方向的捲軸，此時，可在margin被設定為-1px的元素的父元素中設定 overflow:hidden; ，就可以讓水平方向捲軸不顯示出來。
例如：
HTML程式碼：
<body>
<div id="main>
....
</div>
<div id="sub">
....
</div>
</body>
CSS程式碼
#main{
float:right;
width:50%
}
#sub{
margin-left:-1px;
float:right;
width:50%
}
參考文章：
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.193-196
MEPO forum
is powered by Phorum.