自动换行：在 td 内使用 div 进行换行

Question

我正在尝试使用具有断词值的 CSS word-wrap 属性。 我想在 td 中使用它，并且显然需要使用额外的 div 标签才能使其工作。美好的。

我尝试构建一个简化的用例：

HTML:

<table class="sectors">
  <tr>
    <td><div>HURTEAUX / Jean-Baptiste mr)</div></td>
    <td><div>CHEUNJGgdfgdfvfsefsdfsdfsdfsdvvvHJG / Samuel mr</div></td>
    <td><div>CHEUNG / Samuel mr)</div></td>
  </tr>
</table>

CSS

.sectors td {
  border: 1px solid #000;
}

.sectors td div {
  width: 150px;
  word-wrap: break-word;
  border: 1px solid red;
}

问题

Firefox、Chrome 和 Safari 的行为符合预期（至少按照我的预期）。

Firefox 3.5 上的屏幕截图

但是 IE（IE6、IE7、IE8）有一个奇怪的行为：文本正确包裹在 div （红色边框）内，但 td （黑色边框）似乎无缘无故地分配了额外的空间。

IE7 上的屏幕截图

有解决方法或解释吗？

Answer 1

添加overflow:hidden到div应该可以解决这个问题。但无法提供解释，抱歉！