Re: [心得] css 在不同瀏覽器的破解法

看板Web_Design作者 (System hacked)時間18年前 (2007/06/30 18:12), 編輯推噓1(100)
留言1則, 1人參與, 最新討論串2/3 (看更多)
※ 引述《Allenguy ()》之銘言: : div#milkr{width:200px;} /*-for ff-*/ : * html div#milkr{width:180px;} /*-for ie6-*/ : *+html div#milkr{width:150px;} /*-for ie7-*/ 這個... 是錯的。 : 這好像是萬年考古題了 : 上網找到的 : 有需要的人自取 :) 看你所 post 的 css code,你想要解決的應該是 IE{6,7} 在 Quirks mode 下 CSS box model 計算問題,但事實上 IE{6,7} 有能力正確計算 box model, 你的 code 並不對。 在 Wikipedia 上的說明有張圖說明了 IE box model bug: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug 右邊那張圖很清楚的指出問題在於 IE5、IE5.5,以及 IE{6,7} 的 Quirks mode 下會把 padding 與 border 算到 width 裡,這與 CSS 標準要求要分開算不符。 如果你對 IE 的支援只打算做到 IE{6,7},不打算做 IE 5 與 IE 5.5 的話, 最好的方法是在開頭的地方設定 DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "" rel="nofollow">http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> (參考 http://en.wikipedia.org/wiki/Quirks_mode 的表格) 如果你要支援 IE 5 與 IE 5.5,我會建議用 table 排... -- Resistance is futile. http://blog.gslin.org/ & <gslin@gslin.org> -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.113.54.119

06/30 20:04, , 1F
寬度不是我要表達的@@ .... 那只是個例子...
06/30 20:04, 1F
文章代碼(AID): #16XYoI86 (Web_Design)
文章代碼(AID): #16XYoI86 (Web_Design)