如何使IE 11在列中包含大圖像時承認列的寬度？

在Chrome（最新的），並很奇怪，過時的版本的IE下面的工作正常 - 但在最新的IE版本（11），它似乎並沒有表現得如我所願。如何使IE 11在列中包含大圖像時承認列的寬度？

在Chrome瀏覽器（最新）和過時的IE版本第1列不改變它的寬度，以適應列2大圖像，但在最新的IE版本（11）它 - 如何糾正呢？

<table> 
<tr> 
    <td class="header"> 
    Column 1 
    </td> 
    <td class="header"> 
    Column 2 
    </td> 
</tr> 
<tr> 
    <td class="body_twenty"> 
    <table> 
     <tr> 
      <td> 
       Test... 
      </td> 
     </tr> 
    </table> 
    </td> 
    <td class="body_eighty"> 
    <table> 
     <tr> 
      <td> 
       Test... 
      </td> 
      <td> 
       Test... 
      </td> 
     </tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td class="body_twenty"> 
    <table> 
     <tr> 
      <td> 
       Test... 
      </td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
     </tr> 
    </table> 
    </td> 
    <td class="body_eighty"> 
    Test... 
    <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg"> 
    </td> 
</tr> 
<tr> 
    <td class="footer"> 
    </td> 
    <td class="footer"> 
    </td> 
</tr> 
</table>

參見：https://jsfiddle.net/tLfur3xz/1/

來源

2015-07-05 Stone

添加這種風格：

table { 
    table-layout: fixed; 
}

Updated Fiddle

當您使用fixed：

表和列的寬度由表和col 元素的寬度，或通過設置寬度爲的第一行單元格。

MDN documentation

來源

2015-07-05 17:42:56

它的工作原理，如果我給了圖像的寬度也加入img { width: 100% }。

Solution

來源

2015-07-05 17:40:59 GolezTrol

變化max-width: 100%到width: 100%對於img元素。

https://jsfiddle.net/tLfur3xz/3/

欲瞭解更多信息，請參閱this question。

如果指定表格的佈局：固定;在表的CSS它的作品。

似乎是在標準有關表格佈局一些矛盾的術語。特別是，table-layout：auto;這樣說：

列的寬度是由最寬牢不可破內容在

列的寬度是由最寬牢不可破含量在細胞集合中的小區設置由於圖像內容是牢不可破，它將單元格的寬度設置爲內容的大小。最大寬度似乎被它覆蓋。

但是，在這種情況下，我看到在img元素上使用最大寬度和寬度沒有區別，所以簡單地設置寬度對我來說似乎是更好的選擇。

來源

2015-07-05 17:42:24

有趣的是，我打算鏈接到同一個問題，但是在那裏給出的解釋並不建議使用'width：100％'，而是'table-layout：fixed'，就像@RickHitchcock所建議的那樣。 – GolezTrol

在跨過IE過去和現在以及Chrome（最新版）進行測試時，表格佈局方法似乎效果更好。但感謝您的迴應。 – Stone

我已經找到了很多IE的問題是這樣的：你必須在<head>

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

添加以下兩行這解決了佔用了我的時間的幾個問題解決。

來源

2015-11-08 23:38:32 garr1095

你能解釋一下這是什麼嗎？ – Dave

如何使IE 11在列中包含大圖像時承認列的寬度？

回答

相關問題