推 despair96:除了float跟相對絕對位置還有哪幾個排版方式比較好？
→ despair96:ie在Float方面容易出哪些問題..比較常遇到是padding的
→ despair96:剛摸一段時間問問大家學一些css使用經驗..
說到Padding的問題，首先要看CSS的Box model
http://www.cssboxmodel.com/
在正常的狀況下，元素的width是不包含padding的。可是IE會把Padding的寬度計算在
width裡面。換句話說，同時設定Padding跟Width時，IE畫出的元素寬度會比其他瀏覽器
都來的小。
解決方法…不要對一個元素同時指定width跟padding[汗]。
如非用不可，可使用margin代替padding的設定（如果沒有底色/邊框的顧慮的話）
另一個很常見的問題發生在想要設定網頁的寬度，然後想讓網頁置中的狀況。一般都會用
一個div當作wrapper包住網頁整體，然後設定wrapper的寬度。這在其他瀏覽器中可用以
下方法作到：
<body>
<div id="wrapper">blah</div>
</body>
<style>
#wrapper {width:800px; margin:0 auto;}
</style>
由於左右margin都是auto，瀏覽器會計算左右margin的總寬度，然後平均分配，造成置中
的效果。很不幸的，這個作法IE看不懂。wrapper還是會靠左。
解決方法：使用text-align:center;
body{text-align:center;}
#wrapper {width:800px; margin:0 auto; text-align:left;}
設定body的文字置中，然後div也會跟著被置中。但是這在其他瀏覽器上不會讓裡面的div
被置中，所以還是要加上margin auto。最後內層記得把文字設定回靠左。
關於float…在使用到的元素都飄到同一邊時不太會出問題，但如果又有左飄又有右飄時
就很容易發生鬼狀況。像是讀取網頁後內容看不見，要先把畫面往下捲之後再往上捲內容
才會出現之類的…
float跟padding還是margin合用時好像也有問題，IE有時會把留白部份的寬度算成兩倍
不過這個我比較少碰到，沒注意發生條件。
最後這個是抱怨。IE認得a:hover，可是不認得p:hover、#nav:hover、.item:hover…
如果IE能正常的認得hover假元素，只用CSS就能製作浮動式選單，不需要javascript。
我自己比較感冒的是這幾個狀況。應該還會有很多人有經驗可以分享…XD
另外我沒裝IE7或IE8 beta，不知道這些狀況在新版本的IE上有沒有被解決。
--
不可以！那是黑鷹族的精神象徵！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.62.112.152
※ 編輯: GALINE 來自: 61.62.112.152 (06/20 02:11)
推 ateclean:CSS Box Model 拿去GOOGLE圖片可以看到一堆 06/20 02:14
推 despair96:原來是左右飄容易有問題..置中的方法這個我有在用. 06/20 02:21
→ despair96:padding我也是最後都很不愛用..但是最後都會變成用過多 06/20 02:22
→ despair96:div..一直包來包去.. 06/20 02:22
→ GALINE:當碰到這種狀況時，就是該拿表格出來排版的時候了[認真貌] 06/20 02:26
推 JYHuang:土砲式表格排版真是好物啊[感動貌] 06/20 09:28