IE/win Expanding Box

IE/win Expanding Box - 這篇討論一個IE的bug，對於一個fixed width的DIV container，裡面的content 如果比 container 還要長的話，guess what? IE會把fixed width的 container 稱大來match 裡面的 content，genius!
W3C standard 規定 overflow 的 default 是 visible，就是過長的內容會跑到 container 外面，可能會蓋到外面的內容。
這個 bug 沒有解法，只有workaround，也就是用word-wrap: break-word;把過長的行斷掉，注意這是 IE only 的 property。所以

<!--[if IE]>
<style type="text/css">
body {word-wrap: break-word;}
</style>
<![endif]-->

另一個作法是overflow:hidden，

Another drawback of the "hidden" method is that IE/win demands that the boxes having this overflow fix must have widths applied to them. So for example, consider a nested paragraph in one of those floated columns above. The floats do have widths but the nested paragraph will normally be left widthless. If the overflow: hidden; trick is used on the paragraph, it will fail in IE/Win. But, if it's used on the surrounding float it will then work properly, because the element with the overflow rule also has a width applied to it.

In summary, both word-wrap: break-word and overflow: hidden are possible workarounds that will make Internet Explorer respect our specified dimensions. The method of overflow: hidden works in more situations -- such as oversized images and vertical expansions, but at the cost of possibly clipped content. The word-wrap: break-word; method won't clip content, but is useless on anything but text. Now that you have seen the effects of both, their possible employment will depend on specific situations and preferences.