Re: [問題] IE6的css用法...

看板Web_Design作者 (我是CQD,不是cqd)時間17年前 (2008/06/20 02:10), 編輯推噓3(303)
留言6則, 4人參與, 最新討論串3/3 (看更多)

除了float跟相對絕對位置還有哪幾個排版方式比較好?

ie在Float方面容易出哪些問題..比較常遇到是padding的

剛摸一段時間問問大家學一些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
CSS Box Model 拿去GOOGLE圖片可以看到一堆
06/20 02:14, 1F

06/20 02:21, , 2F
原來是左右飄容易有問題..置中的方法這個我有在用.
06/20 02:21, 2F

06/20 02:22, , 3F
padding我也是最後都很不愛用..但是最後都會變成用過多
06/20 02:22, 3F

06/20 02:22, , 4F
div..一直包來包去..
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
文章代碼(AID): #18Mg4mhJ (Web_Design)
文章代碼(AID): #18Mg4mhJ (Web_Design)