自动换行:在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的行为符合预期(至少和我预期的一样).

Firefox 3.5上的截图

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

IE7上的截图

任何解决方法或解释？

Answer 1

添加溢出:隐藏到div应该排序.不过不能提供解释,对不起!