Question

我发现Chrome和Firefox行为之间存在非常奇怪的差异。

我有一个带width: 25%的列集和一个图像标题。如果没有图像标题，则两个浏览器的行为方式相同，但是对于图像，列在chrome上会丢失其宽度。点击图片查看此处：

input {
  display: none;
}
input:checked +img {
  display: none;
}

<table width='600' border='0' cellspacing='0' style='margin:0; padding:0; text-align:center; background:white; color: #555; font-size:18px; font-weight:300; font-family: Roboto, Verdana, Arial, sans-serif'>
  <tbody>
    <tr>
      <td colspan="4">
        <label>
          <input type="checkbox">
          <img src="http://www.esandra.com/file/2012/09/slider-imagen.jpg">
        </label>
      </td>
    </tr>
    <tr>
      <td colspan="4">APPROVED</td>
    </tr>
    <tr>
      <td style="width:25%;">LOC</td>
      <td>Name</td>
      <td>#</td>
      <td>age</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>Simon</td>
      <td>1</td>
      <td>18</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>Niles</td>
      <td>2</td>
      <td>51</td>
    </tr>
    <tr>
      <td colspan="4">NOT APPROVED</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>What happens if any name is thiiiiiis long</td>
      <td>3</td>
      <td>13203203212 seconds and 1215 minutes</td>
    </tr>
  </tbody>
</table>

我认为这与其他问题不同，因为只有当图像出现时才会发生......

这是一支供您尝试的笔：http://codepen.io/vandervals/pen/waPQZj?editors=110

有人知道如何让它在Chrome中运行，就像在Firefox中一样吗？

编辑：我忘了提到这是针对具有可变内容的时事通讯，这就是为什么表是必需的（否则我不会因为使用它而伤害自己）。

Answer 1

尝试将table-layout: fixed;添加到您的表格中。见fiddle.

稍后编辑：

我通过向图片中添加max-width: 100%来获得chrome中的firefox功能。见fiddle.

表格列以chrome

1 个答案: