html - 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样式。我也改变了，但也没有任何效果。displayoverflowmargin-rightpadding-right

我怎样才能让 WebKit 尊重图标的margin-right？

我正在使用 Twitter Bootstrap 作为我网站的 CSS 框架。我没有为这张表使用 Bootstrap 的 CSS。

Answer 1

是的，它是引导 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>