Re: [問題] IE6的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)
推
06/20 02:14, , 1F
06/20 02:14, 1F
推
06/20 02:21, , 2F
06/20 02:21, 2F
→
06/20 02:22, , 3F
06/20 02:22, 3F
→
06/20 02:22, , 4F
06/20 02:22, 4F
→
06/20 02:26, , 5F
06/20 02:26, 5F
推
06/20 09:28, , 6F
06/20 09:28, 6F
討論串 (同標題文章)
完整討論串 (本文為第 3 之 3 篇):