G4[CSS] 面對非標準的 IE 瀏覽器，圖片撐破表單的解決方法
其實以上都是閒聊...（汗）今天碰到的問題是在 Firefox 上看版面沒有問題，但是 IE 上卻發生表格被圖片撐開的情況。在全是表格的網頁上，被撐開的圖片斷層殘破不堪，實在非常有礙觀瞻；雖然大家都知道 IE 對網頁標準支援非常的不完全（wiki 寫的很含蓄：「只是有一些排版錯誤」），不過對於大部分的人來說，IE 幾乎就是瀏覽器的代名詞，所以既然有問題就還是得解決...
因為小弟經驗不足，找了半天還是找不出解決方法～後來經由 Abu 的幫忙，總算是用 CSS 解決問題囉！會發生圖片斷層的原因主要是因為圖片大小超過表單的大小，雖然我明明就把表格的高度與圖片的高度設定的一模一樣，但是好樣的 IE 就是會判斷錯誤，造成圖片斷層的問題。這個時候只要在 <img> 中加入 CSS：
<img style="float: left;" src="/sample.jpg" alt="測試圖片"/>
原本歪七扭八，七零八落的圖片就能完全契合於表格中囉！
CSS 在排版的時後, 都會遇到在 Firefox 排版完成, 但是在 IE 亂了, 而且在 IE 6 看是好的, 在 IE 7 可能又亂了.....
解法就是在屬性前面加上特殊符號, 那些符號是 IE 認識, 但 Firefox 不認識, 用這種方法來將畫面做微調.
解法如下述幾點:
- *: IE 7 以前的版本認得(7以後的不知道, 還沒出..)
- _: IE 7 不認得, IE 6 以前的版本認得_
- Firefox 不認得 _, *
- 將畫面在 FF 寫好後, 然後再用 *, _ 來對 IE 做微調
ex:
若 Firefox 寫好後, 發現用 IE 6看會往右偏移 5px, 在 IE 7 會往右偏移 6px,則如下:
#attr {margin-left:10px; _margin-left:-5px;*margin-left:6px;}
屬性前面有 _ 的, 只有在 IE 6 以前的 Broswer 會有效用, * 只會在 IE7 有作用, Firefox 只認得 margin-left:10px; 那一個, 後面那兩個都不認識.
其它小技巧可參考: Ten more CSS tricks you may not know
留言列表
