作者santin (被雷劈)
看板Web_Design
標題Re: CSS排版,IE跟FF的問題...
時間Sun Oct 8 15:24:36 2006
※ 引述《godisempty (justlikeme)》之銘言：
: 小弟我是CSS初學者
: 用CSS排動態網站
: 可是IE排完了, Firefox又完全跑掉
: 兩個都不能相同顯示 = ="
: 這兩者該怎麼做才會正常顯示呢?
我也是CSS新手= =a
不過有些問題也有遇過
主要是因為IE有很多BUG
像是Doubled Float-Margin Bug
當你對幾個物件設定float:left; margin-left:20px;
這樣理論上來說應該是每個被float的物件都間隔20px
但是在IE上最左邊的卻會變成40px
諸如此類的bug很多~"~
所以建議貼上網址讓大家看看哪些地方的寫法可能會造成IE的問題
再一個一個解決
至於樓下的IE Hack
也可以說是CSS Hack
我是覺得搞懂問題的原因再使用比較好:)
通常我會寫成這樣↓
left:100px;
*left:103px;
因為加上*號要是要暫時標記比較好改XD
/*left:103px;*/
這個原理是利用IE會將*left視為寫錯字，很貼心(?)的照樣當做正確的讀取
但是符合標準的瀏覽器是不會去讀取那一行的(無效的選擇器名稱)
就會變成
left:100px; →firefox讀取
*left:103px; →IE讀取
忘了說
樓下推文還有一個是html>body #index1這種寫法
也是利用IE的特性
假設寫成
#index1 {
width:100px;
height:100px;
background:#ff0;
}
html>body #index1 {
background:#fff;
width:100px;
height:100px;
}
那麼IE只會讀取上面那個CSS
而html>body #index1則會被IE以外的瀏覽器讀取
顯示出來的是IE看到黃色方塊，其他的瀏覽器看到白色方塊
可以試試看:)
※ 編輯: santin 來自: 61.229.111.56 (10/08 15:35)
1F：推 elan:推"搞懂問題的原因再使用比較好" 10/11 23:15
2F：→ elan:補充一點看法:用child-selector來避免IE讀取並不是IE的'特性' 10/11 23:16
3F：→ elan:那是因為IE6之前不支援此規格,嚴格來說根本不是'hack' 10/11 23:19
4F：→ elan:從正確的設計觀點上,盡量不要利用UA的CSS支援度來修正特定UA 10/11 23:22
5F：→ elan:的rendering bugs 10/11 23:24