开发者

word-wrap: break-word with div inside td

I'm trying to use the CSS word-wrap property with break-开发者_如何学编程word value. I want to use this inside a td, and apparently need to use a additional div tag for this to work. fine.

I tried to build a simplified use-case:

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;
}

The problem

Firefox, Chrome and Safari behave as expected (at least as I expect).

screenshot on Firefox 3.5

But IE (IE6, IE7, IE8) has a strange behavior: the text is properly wrapped inside the div (red border), but it seems the td (black border) is allocating extra space for no reason.

screenshot on IE7

Any workaround or explanation?


Adding overflow:hidden to the div should sort it out. Can't offer an explanation though, sorry!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜