[CSS] 面對非標準的 IE 瀏覽器，圖片撐破表單的解決方法

Thu, 25 Dec 2008 18:00:49 +0800

在撰寫網頁程式的時候，除了程式的撰寫以外，最花時間的部分大概就是版型的套用吧。有經驗的網頁美工設計師會利用 CSS 進行網站版面的配置，CSS 的運用對網頁程式設計師來說會比較親切；但是對大部分習慣以 Dreamwaver 為開發工具的網頁美工設計師來說，表格 table 的運用似乎比較心應手。雖然說如果一個簡單的網頁設計要從無到有，我也會比較傾向使用表格；但是對於複雜的網頁樣板來說，巢狀的表格真的是會讓人眼花撩亂啊...（噗）

其實以上都是閒聊...（汗）今天碰到的問題是在 Firefox 上看版面沒有問題，但是 IE 上卻發生表格被圖片撐開的情況。在全是表格的網頁上，被撐開的圖片斷層殘破不堪，實在非常有礙觀瞻；雖然大家都知道 IE 對網頁標準支援非常的不完全（wiki 寫的很含蓄：「只是有一些排版錯誤」），不過對於大部分的人來說，IE 幾乎就是瀏覽器的代名詞，所以既然有問題就還是得解決...

因為小弟經驗不足，找了半天還是找不出解決方法～後來經由 Abu 的幫忙，總算是用 CSS 解決問題囉！會發生圖片斷層的原因主要是因為圖片大小超過表單的大小，雖然我明明就把表格的高度與圖片的高度設定的一模一樣，但是好樣的 IE 就是會判斷錯誤，造成圖片斷層的問題。這個時候只要在中加入 CSS：

<img style="float: left;" src="/sample.jpg" alt="測試圖片"/>

原本歪七扭八，七零八落的圖片就能完全契合於表格中囉！真是比吃滷肉飯還簡單哩～謝謝 Abu！

台扣啵的研究日誌-CSS

[CSS] 面對非標準的 IE 瀏覽器，圖片撐破表單的解決方法