为什么 IE 会显示一个 100% 高度内容的垂直滚动条？答案

【问题标题】：Why does IE display a vertical scrollbar with this 100% height content?为什么 IE 会显示一个 100% 高度内容的垂直滚动条？
【发布时间】：2011-06-25 16:56:55
【问题描述】：

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

普通玩家：http://play.nimbushd.com/lfu53b5

全屏版：http://play.nimbushd.com/lfu53b5/fullscreen

我几乎尝试了 DOM 中的每个节点，并将宽度/高度设置为 100%，边距：0px，填充：0px。似乎在 Firefox 中运行良好。那么，为什么 IE 会在底部显示一个带有小空格的垂直滚动条呢？

编辑： 由于此问题已解决，因此简短说明：ASP.NET <form> 标记中的 100% 高度/宽度 Silverlight 控件在 IE 中仅溢出一点，因为 @ 987654324@标签。

【问题讨论】：

标签： html css silverlight internet-explorer

【解决方案1】：

这种行为是由<form> 中的内联元素引起的 - 内联元素总是呈现line-height 的像素值。以下任何 CSS 规则都可以修复它：

form { font-size: 0; }

或

form * { display: block; }

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

【讨论】：

完美！我不知道表单标签会影响它； font-size: 0 效果很好！！谢谢！
考虑到这一点，Firefox 没有显示这种行为似乎很奇怪。我很好奇这是否是 IE8 标准中的错误（IE7 和 IE8 怪癖模式没有这个“问题”；我目前无法检查 IE9）。或者，也许 IE8 实际上是符合标准的，而 Firefox 对纯空格文本节点更加宽容（因为我相信这些是导致 IE 出现问题的原因）。
我怀疑某个地方的空白会是问题所在。 +1，干得好。
在<form> 标记内的<object> 标记也有同样的问题。将对象的高度设置为表单的高度总是 1px 太多。将<object> 元素的display CSS 属性设置为block 后，现在一切正常。非常感谢这个有价值的答案！！！

【解决方案2】：

你的 html 中需要这种样式：

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

请注意，这会将样式应用于html 和body，以将html 元素的高度强制为视口高度，因此也适用于主体。

【讨论】：