在Internet Explorer 7中對絕對div的填充進行了不同的解釋

Question

在Internet Explorer 8及更高版本以及所有其他瀏覽器中，絕對div元素的填充不會在頁邊距為負數時將內容壓入頁面。

但是在Internet Explorer 7中，無論如何，填充都會壓低內容。

此代碼不使用JavaScript。

這是它在Internet Explorer 8，Firefox和Chrome中運行的屏幕截圖（沒有垂直溢出）：

這是在Internet Explorer 7中運行的相同代碼的gif：

這是我的代碼：

 p { margin-top: 0; margin-bottom: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } #container { min-height: 100%; position: relative; } #header { background: yellow; height:50px; } #body { padding-bottom: 50px; /* Height of the footer */ } #footer { position: absolute; bottom: 0; width: 100%; height: 50px; /* Height of the footer */ background: green; } #body { height: 100%; width: 100%; position: absolute; margin-top: -50px; padding-top: 50px; } #main-content-container { height: 100%; } .inset-boxshadow-and-background { background-color: red; height: 100%; width: 100%; } </style> <!--[if lt IE 7]> <style media="screen" type="text/css"> #container { height: 100%; } </style> <![endif]-->

 <body> <div id="container"> <div id="header"> </div> <div class="body-parent"> <div id="body"> <div id="main-content-container"> <div class="inset-boxshadow-and-background"> <!-- Body start --> <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="https://matthewjamestaylor.com/bottom-footer">full article</a> for all the details.</p> <!-- Body end --> </div> </div> </div> </div> <div id="footer"> </div> </div> </body>

而且請不要“ Internet Explorer 7沒用”，因為我知道它很臭！

Answer 1

嘗試使用以下代碼：

<style type="text/css">
    p {
        margin-top: 0;
        margin-bottom: 0;
    }

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    /* Core styles */
    .header {
        position: absolute; /* needed for stacking */
        height: 50px;
        width: 100%;
        background-color: yellow;
    }

    .content {
        position: absolute;/* needed for stacking */
        top:50px;
        width: 100%;
        height: 100%;
        background-color:red;
    }
    .footer {
        position: absolute;/* needed for stacking */
        width: 100%;
        height: 50px;
        bottom:-50px;
        background-color:aqua;
    }
    #main-content-container {
        height: 100%;
    }

    .inset-boxshadow-and-background {
        background-color: red;
        height: 100%;
        width: 100%;
    }
</style>
<div class="header">
    <div class="header-inner"></div>
</div>
<div class="content">
    <div class="content-inner">
        <div id="body">
            <div id="main-content-container">
                <div class="inset-boxshadow-and-background">
                    <!-- Body start -->
                    <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="https://matthewjamestaylor.com/bottom-footer">full article</a> for all the details.</p>
                    <!-- Body end -->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner"></div>
</div>

更新：以下代碼對我而言效果很好，請參考它。

<style type="text/css">
    p {
        margin-top: 0;
        margin-bottom: 0;
    }

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

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

    #container {
        height: 100%;
        position: relative;
        background-color:red;
    }
    #header {
        position: absolute;
        top:0;
        width:100%;
        background-color: yellow;
        height: 50px;
    }
    .body-parent {
        margin-top: 50px;
        position: absolute;
    }
    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px; /* Height of the footer */
        background-color: green;
    }
    #body {
        height: 100%;
        width: 100%;
        padding-bottom: 50px; 
    }

    #main-content-container {
        height: 100%;
    }

    .inset-boxshadow-and-background {
        background-color: red;
        height: 100%;
        width: 100%;
    }

</style>
<div id="container">
    <div id="header">
    </div>
    <div class="body-parent">
        <div id="body">
            <div id="main-content-container">
                <div class="inset-boxshadow-and-background">
                    <!-- Body start -->
                    <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="https://matthewjamestaylor.com/bottom-footer">full article</a> for all the details.</p>
                    <!-- Body end -->
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

結果如下：

Answer 2

我使用IE 7進行了測試，可以產生此問題。

當靜態元素在頂部/左側被賦予負邊距時，它將沿該指定方向拉動元素。

但是，如果將其應用於底部/右側，則不會像您想象的那樣向下/向右移動元素。 取而代之的是，它將任何后續元素拉入主元素，並將其重疊。

因此，由於這個原因，我認為您的頁腳在頂部方向拉了50像素。 IE 7可能以負邊距工作。

您可以嘗試將其刪除，以幫助您解決此問題。

參考：

使用負邊距的權威指南

Answer 3

通過直接更改任何絕對定位的div（負邊距和正數字填充），可以修復僅IE7這種奇怪的外觀（IE6和IE8 +可以正常顯示）。

這是JS：

 window.onload = function(){ $('body').height( $(window).height() - 100 ); };

 p { margin-top: 0; margin-bottom: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } #container { min-height: 100%; position: relative; } #header { background: yellow; height:50px; } #body { padding-bottom: 50px; /* Height of the footer */ } #footer { position: absolute; bottom: 0; width: 100%; height: 50px; /* Height of the footer */ background: green; } #body { height: 100%; width: 100%; position: absolute; margin-top: -50px; padding-top: 50px; } #main-content-container { height: 100%; } .inset-boxshadow-and-background { background-color: red; height: 100%; width: 100%; } </style> <!--[if lt IE 7]> <style media="screen" type="text/css"> #container { height: 100%; } </style> <![endif]-->

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <div id="container"> <div id="header"> </div> <div class="body-parent"> <div id="body"> <div id="main-content-container"> <div class="inset-boxshadow-and-background"> <!-- Body start --> <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Just remove the javascript to make it work in every browser except ie7, and keep the javascript to only run successfully it in IE7.</p> <!-- Body end --> </div> </div> </div> </div> <div id="footer"> </div> </div> </body>

在Internet Explorer 7中對絕對div的填充進行了不同的解釋

問題描述

3 個解決方案

解決方案1
1 已采納 2018-09-26 10:03:42

解決方案2
0 2018-09-26 09:52:13

解決方案3
0 2018-09-27 02:50:36

在Internet Explorer 7中對絕對div的填充進行了不同的解釋

問題描述

3 個解決方案

解決方案1 1 已采納 2018-09-26 10:03:42

解決方案2 0 2018-09-26 09:52:13

解決方案3 0 2018-09-27 02:50:36

解決方案1
1 已采納 2018-09-26 10:03:42

解決方案2
0 2018-09-26 09:52:13

解決方案3
0 2018-09-27 02:50:36