CSS空白級聯不正確？

Question

我有以下的基本結構：

<table> 
    <tr> 
    <td> 
     <div id="root"> 
     <div>Lots of text here</div> 
     <div>Lots more test here</div> 
     </div> 
    </td> 
    <td>I should always be visible</td> 
    </tr> 
</table> 

而這個CSS：

#root { 
    white-space: nowrap; 
    overflow: hidden; 
} 
#root>div { 
    white-space: normal; 
    display: inline-block; 
    width: 100%; 
} 

的想法是，每個孩子<div> S的「頁」，可以通過水平滾動顯示。儘管normal會影響他們（並且根據檢查員的說法，他們正在影響他們），儘管這些元素確實並排出現，但其中的文字似乎仍受nowrap的影響。我已經在IE9（white-space工作正常），和Chrome 23（white-space仍然nowrap）測試。

有沒有解決方法，或者是Chrome中的（嚴重）錯誤？

Answer 1

它看起來像在this fiddle here罰款。

我撥弄包含一些Lorem存有你的例子hucked在那裏填寫：

HTML：

<div id="root"> 
    <div>Lots of text here</div> 
    <div>Even more text here... well, in the fiddle it's the exact same text...</div> 
</div> 

CSS：

#root { 
    white-space: nowrap; 
} 

#root > div { 
    white-space: normal; 
    display: inline-block; 
    width: 100%; 
} 

正如你可以看到的截圖下面，將空格正確設置爲normal。