html - IE8 Body 未占用 100% 高度

标签 html internet-explorer-8 height document-body

在我的应用程序中,我无法在 IE8 中完全覆盖浏览器窗口的一个页面。

HTML:

<body class="body">
    <div class="wrapper">
        <div class="main-holder">
            <form id="Form1" runat="server">

            </form>
        </div>
    </div>
</body>

还有 CSS:

.body {
    background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    -pie-background: linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    behavior: url(PIE.htc);
    height: 100%;
}
.main-holder {
    width: 1000px;
    min-height: 600px;
    margin: 10px auto;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;
    -moz-box-shadow: 10px 10px 10px #000;
    -webkit-box-shadow: 10px 10px 10px #000;
    box-shadow: 10px 10px 10px #000;
    background: -webkit-gradient(linear, left bottom, left top, from(#F8AC25), color-stop(0.05, #FFF999), color-stop(0.5, #F8AC25), color-stop(0.95, #FFF999), to(#F8AC25));
    background: -webkit-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -moz-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -ms-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -o-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    -pie-background: linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    behavior: url(PIE.htc);
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial Sans-Serif;
}

但在 IE8 中,页面顶部和底部有两条白条。由于这个原因,正文并没有完全覆盖页面,但在 Firefox 中它确实如此。

IE8 截图:

enter image description here

Firefox 截图:

enter image description here

在 IE8 中,它们是围绕包装器的偏移量:

enter image description here

任何信息都会对我很有帮助。

谢谢。


enter image description here

最佳答案

问题可能是由于 html 或 body 元素引起的。试试这个:

html, body {
padding: 0;
margin: 0;
height: 100%;
}

请注意,将高度设置为 100% 可能会给您带来问题,因为网站会超出 Canvas ,从而出现滚动条。高度仍将是 100%,可能会导致内容溢出问题。

关于html - IE8 Body 未占用 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10057436/

相关文章:

asp.net - iFrame 中的大表格会导致 IE8 崩溃

Android - 每行/getView() 中具有不同高度的 ListView

html - 为什么不使用 div?

jquery - 如何在页面加载jquery时获取表单ID

javascript - 用于 DOM 节点引用的 IE8 兼容弱映射

icons - 使一行 Font Awesome Icons 高度相同

css - div 内的居中对齐文本 - div 的高度以百分比表示

html - 如何同步循环遍历 indexedDB 表?

javascript - 纯 javascript 在 iPad 上拖动不流畅

css - 在资源管理器中显示页面