Table Caption 在 IE 中超出其容器答案

【问题标题】：Table Caption exceeds its container in IETable Caption 在 IE 中超出其容器
【发布时间】：2013-10-10 10:24:14
【问题描述】：

这是一个非常简单的 html 页面。使用 IE（选中 8,10），文本超出其容器。但是FF，Chrome不会出现这样的问题。

<!DOCTYPE html>
<html>
    <body>  
        <div style="display:inline-block;border:1px solid black">       
        <table>
            <caption><nobr>I' m table caption</nobr></caption>                                                                                      
        </table>                                            
    </div>  
    </body>
</html>

表格的“标题”标签似乎是原因。有人知道为什么它在 IE 中的行为不同吗？谢谢。

【问题讨论】：

问题的原因是 div 样式的display:inline-block。有关display:block 样式的行为，请参阅以下JSFiddle。以下 SO 问题可以帮助您：stackoverflow.com/questions/4750088/…
IE 在计算表格宽度时忘记查看标题。这很可能是一个错误。
“inline-block”和边框只是为了直观地呈现宽度问题。谢谢大家，我现在也相信这是IE的一个错误。

标签： html internet-explorer cross-browser

【解决方案1】：

问题的原因是 div 样式的display:inline-block。

请参阅以下JSFiddle 以了解display:block 样式的行为。以下 SO 问题应该可以帮助您：

CSS Display inline-block issue with IE

编辑：

从Fiddle 看来，IE 没有正确计算表格宽度，包括 @MrLister 解释的标题。

【讨论】：

不！没有内联块也存在同样的问题。 IE 计算表格的宽度错误。请参阅this fiddle，其中 IE 也会忽略标题的宽度。
那是因为在那个小提琴中你已经设置了float:left 样式属性。如果你从表中删除它，它看起来是正确的。
@MrLister 以下Fiddle 以更易于理解的方式展示了您所解释的内容。我看到你现在对 IE 没有计算标题的宽度是正确的。
这里，a fiddle 没有浮动块或内联块。只是一张桌子。 IE 报告表格宽度为 14，其他浏览器报告 111。（这可能会因您的字体而有所不同，但您明白了。）
您说得对，先生！我想知道微软是否知道这个错误，我似乎无法通过搜索找到任何参考...