[前端]IE11的表格內圖片跑版

IE11的表格內圖片跑版？

＊問題

使用IE11，表格圖片跑版。
就只有在IE11的時候表格圖片變超大或是跑版。
但IE8、Chrome、firefox等等瀏覽器皆正常。

＊原因

IE11的情況下，table內的圖片不會聽td的寬度，會無視，並以自己的寬度去撐開表格。
造成頁面跑版。

通常會出現在響應式網頁內>>表格的圖片，因為images只有下max-width、沒有設定width，圖片（images）就會顯示自己原始的長寬，導致跑版。

解決方法

＊方法1：圖片自己寫上寬度width，讓他去聽父層(td)的寬度再跑自己的寬度

table img{
  width:100%;
}

＊方法2：設定表格屬性"table-layout: fixed;"，表格寬度設定優先

table {
  table-layout: fixed;
}

表格"table-layout"有兩種屬性值：

• automatic：表格寬度未定的話，取決於內容( 此為預設值 )。
• fixed：表格寬度取決於表格設定的值。fixed雖非預設，但如果寬度有設，所有瀏覽器的表格就會優先依照設定的寬度去跑。

以上。
兩種方法都可以，選一個自己喜歡的吧，td記得要給width寬度唷(響應式網頁建議給百分比%單位)。

關鍵字

Bootstrap responsive image in table fails in IE11
 IE11　Image inside table doesn't follow td width

參考網頁

How to make IE 11 honour columns widths in tables when containing large images in rows?