填充文本时，WebKit会减小表格单元格的大小

Question

我这里有一张表格，显示图标，标题和说明。这是示意图：

      | Title
 icon | -------------------
      | Description

以下是生成此布局的相关HTML代码：

<table><tbody>
<tr>
  <td rowspan="2"><img style="margin-right: 2.0em;" src="icon.png"></td>
  <td valign="top"><h2>Title goes here</h2></td>
</tr>
<tr>
  <td valign="bottom"><b>
    description description description description description description description extra text extra text extra text extra text
  </b></td>
</tr>
...
</tbody></table>

此表在Chrome中显示如下：

当我从描述中删除文本时，该表重新获得了适当的外观：

但是，在Firefox中始终正确显示相同的表：

似乎WebKit不尊重图标的margin-right，而Firefox则不然。我通过更改td和b尝试使用描述的display和overflow标记'样式，但没有任何效果。我也将margin-right更改为padding-right，但也没有任何影响。

如何让WebKit尊重图标的margin-right？

我使用Twitter Bootstrap作为我网站的CSS框架。我没有在这张桌子上使用Bootstrap的CSS。

Answer 1

是的，这是bootstrap CSS。这个类有max-width: 100%，原因是：

img {
    width: auto 9;
    height: auto;
    max-width: 100%;  /* the culprit */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

要解决此问题，请重置max-width：

td img {
    margin-right: 2.0em;
    max-width: initial;
}

演示：

输出：

CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

td img {
    margin-right: 2.0em;
    max-width: initial;
}

HTML：

<table>
    <tr>
        <td rowspan="2"><img src="http://placekitten.com/75" /></td>
        <td><h2>Title goes here</h2></td>
    </tr>
    <tr>
        <td><b>description description description description description ajdjaslkd lasdjalksjd asjdlasjdlkas asjdklasdjas jaskldja asdjlkasdsjal asjdlksa</b></td>
    </tr>
</table>