Re: [心得] css 在不同瀏覽器的破解法
看板Web_Design作者DarkKiller (System hacked)時間18年前 (2007/06/30 18:12)推噓1(1推 0噓 0→)留言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
討論串 (同標題文章)
本文引述了以下文章的的內容:
完整討論串 (本文為第 2 之 3 篇):