html - 为什么不包含 div 的 td 拉伸到适当大小的 IE7

Question

我的标记是：

<table style="table-layout:fixed">
  <tr>
    <td class="key">
      <div>Age:</div>
    </td>
    <td class="value">
      <div>69</div>
    </td>
  </tr>
</table>

我的CSS是：

td.key
{
  border-left: 1px solid #D6D6D6;
  text-align: right;
  font-weight: normal;
  color: #7f7f7f;
  background-color: peachpuff;
  width: 115px;
}

td.key div
{
  width: 100%;
  background-color: lightseagreen;
}

来自 Chrome 的 TD 元素的“Computed Style”屏幕截图：

来自 Chrome 的 DIV 子元素的“计算样式”屏幕截图：

现在，当它在 Chrome 中呈现时，我得到了这个结果：

当它在 IE7 中呈现时，我得到以下结果：

不知道我做错了什么任何帮助都会很棒！

注意：在 IE8+ 上不会出现此问题

Answer 1

如果您只想将属性应用于 IE7 及以下版本，则可以使用如下*键：

td.key
{
  border-left: 1px solid #D6D6D6;
  text-align: right;
  font-weight: normal;
  color: #7f7f7f;
  background-color: peachpuff;
  width: 115px;
  *width: 105px;
}

这使得它在所有浏览器中的宽度都是 115，但是一旦它在 IE7 或更低版本中加载，它会将宽度设置为 105px 以在最后切断多余的空间。

这更像是一种解决方法而不是解决方案，但它仍然有效。