自动换行：在td内使用div的break-word

Question

我正在尝试使用带有break-word值的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的行为符合预期（至少和我预期的一样）。

screenshot on Firefox 3.5

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

screenshot on IE7

任何变通方法或解释？

Answer 1

添加溢出：隐藏到div应该将其排序。虽然不能提供解释，抱歉！