为什么IE浏览器在100%高度内容中显示垂直滚动条？

Question

我有一个Silverlight视频播放器，我想以“100％浏览器宽度/高度”模式显示它（即不是全屏，而是填充整个浏览器显示区域）。

常规播放器：http://play.nimbushd.com/lfu53b5 全屏版本：http://play.nimbushd.com/lfu53b5/fullscreen 我已经尝试了DOM中的几乎每个节点，并将宽度/高度设置为100％，并使用margin: 0px，padding: 0px。在Firefox中似乎很好用。那么，为什么IE会显示带有一些空白的垂直滚动条呢？

编辑：由于此问题已得到解决，简短的解释如下：位于ASP.NET <form>标记中的100％高度/宽度Silverlight控件会在IE中溢出一点，因为有form标记。

- Brandon

Answer 1

这种行为是由于在<form>元素内部嵌套的内联元素导致的-内联元素始终呈现一个像素值等于line-height的高度。以下任何CSS规则都可以解决此问题：

form { font-size: 0; }

或者

form * { display: block; }

或者，您可以尝试摆脱所有<form>的内联后代元素（包括文本节点）-但我不确定它是否真正起作用（未经测试）。此外，这将使您的标记难以维护（您需要剥离所有换行符等...可以在部署期间完成，但我认为这太过分了）。

- Jakub Januszkiewicz

---

太好了！我不知道表单标签会影响那个；font-size: 0 很有效！！谢谢！ - Brandon

经过思考，似乎Firefox不显示这种行为很奇怪。我很好奇这是否是IE8标准的一个错误（IE7和IE8 quirks模式没有这个“问题”；我现在无法检查IE9）。或者IE8实际上符合标准，而Firefox对仅包含空格的文本节点更宽容（因为我认为这些是导致IE中出现问题的原因）。 - Jakub Januszkiewicz

我怀疑空格可能是问题所在。+1，干得好。 - thirtydot

在<form>标签内部有一个<object>标签时，我遇到了同样的问题。将对象的高度设置为表单的高度总是多1像素。将<object>元素的display CSS属性设置为block后，一切都正常工作了。非常感谢这个宝贵的答案!!! - AxD

Answer 2

您需要在您的HTML中添加以下样式：

您需要在您的HTML中添加以下样式：

<style type="text/css">
html, body {
    height: 100%;
    overflow: hidden;
}
body {margin: 0px}
</style>

请注意，这会将样式应用于html和body，以强制html元素的高度适应视口高度，从而也会影响到body元素。

- AnthonyWJones