IE 和谷歌浏览器之间的页脚兼容性不会妥协

Posted 2023-03-21

技术标签:

【中文标题】IE 和谷歌浏览器之间的页脚兼容性不会妥协【英文标题】：Footer compatibility compared between IE and Google Chrome won't Compromise 【发布时间】：2015-03-02 12:29:29 【问题描述】：

在我的代码中，只要我在 Google Chrome 中指定页面的高度，我的页脚就会显示在页面底部，上下没有空间。我试过做 height: 100% 等等，但还是有问题。

与我的 IE 11 相比，具有指定高度的页脚下方有空间。我似乎无法让这两个浏览器都妥协，我尝试了各种选项来让它们都工作。

我当前会影响页脚的css代码如下所示：

html 
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        min-width: 768px;
        /*keeps footer at bottom of page for IE 11 */
        display: flex;

    

    /* Formating for body of Web Site */
    * margin: 0; padding: 0;
    body 
     font-family: times new roman;
     background-color: #ebebeb;
     zoom: 75%;
     /*keeps footer at bottom of page for IE 11 */
     width: 100%;
     background-postion: 50% 80%;

     

     #screen 
     /* This locks everything in place*/
     top:0px;
     margin: 0 auto; 
     width:1500px;
     height: 1500px;
         padding-top:0;
         padding-bottom: 30px;
         postion: absolute;
     margin-left: 70px;
     margin-bottom: 0;

     

 /* footer formating  */
    #footer 

        background-color: black;
        height: 40px;
        width: 1500px;
        color: white;
        padding-top: 10px;
        position: relative center;
        bottom: 0;
        text-align: center;
        margin-left:70px;

我的html：

<html>
<div id = "screen">
 <body>


 ............................................. other code

<div id = "footer">
        Copyright Notice - Site Maintanence by **********
        <br>
        Author of Published Text Content: ************<br>

        <a href = "#">Pagetop</a>

</div> <!-- end footer -->

</div> <!-- end screen format -->

 </body>

</html>

IE 的样子：

【问题讨论】：

【参考方案1】：

如果我猜对了，您希望页脚在 Chrome 和 IE11 浏览器中“粘贴”网站的上部。我不确定你为什么选择这个 CSS 设置，因为你没有提供完整网站的链接，所以我不知道到底发生了什么，但是，你不仅可以在这两个上得到你想要的，而且在所有的浏览器中，关键在于结构和 CSS，让我告诉你。

首先，我整理了您的 HTML 和 CSS，以便更容易阅读和遵循，我还删除了不需要的代码部分，但您可以参考旧代码以查看更改。

<div id="screen"> 元素在<body> 标签之外，所以我把它放进去。

正如您在 HTML 代码中看到的那样，我已将带有“lorem ipsum”文本的 <div id="leftcol"> 和 <div id="centercol"> 元素放入以说明您网站中的情况。我假设<div id="screen"> 是网站包装器，所以我将它全部包装在其中。

<div id="screen">
    <div id="leftcol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>
    <div id="centercol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>  
    <div class="clear"></div>
    <div id="footer">
        Copyright Notice - Site Maintanence by **********
        <br />
        Author of Published Text Content: ************
        <br />  
    </div> <!-- end footer -->
    <div class="center">
        <a href = "#">Pagetop</a>
    </div>    
</div> <!-- end screen format -->

你可以在 CSS 中看到我已经删除了我之前说的不必要的代码，关键是保持事情简单，除非你因为某种原因不得不让它变得复杂，如果你能告诉我你需要 @ 的原因987654328@ 元素与display: flex; 或<div id="screen"> 元素与position: absolute; 我会尽力帮助您解决问题，但除此之外，让我们保持简单：

*

    margin: 0;
    padding: 0;


html

    font-size: 100%;
    font: inherit;
    vertical-align: baseline;


body

    font-family: times new roman;
    background-color: #ebebeb;
    background-postion: 50% 80%;


#screen

    margin: 0 auto;


#footer

    padding: 5px;
    background-color: #000;
    color: #fff;
    text-align: center;


.center

    text-align: center;


#leftcol

    width: 30%;
    float: left;
    background: #B4B4B4;


#centercol

    width: 60%;
    float: right;    
    background: #fff;


#leftcol, #centercol

    padding: 2%;


.clear

    clear: both;

这就是它在所有浏览器中的工作方式，包括旧版本的 IE。

示例：http://jsfiddle.net/Lvrcw4vw/3/

【讨论】：

非常感谢您的解释。我同意我的代码开始变得有点不受控制，因为我试图找到不同的方法来控制它。屏幕 id 也确实是包装器。我还试图让所有浏览器的页脚都粘在页面底部。与您的示例相比，我将确保稍后检查我的网站。会及时通知你。我也使用了 flex，因为这是我发现的一个示例，可以帮助将页脚保持在页面底部。绝对位置是我发现的另一个有助于控制页面的示例。如果我不使用这些，页脚总是显示在所有文本容器框后面的页眉下方。欢迎您，我不确定它是否会 100% 解决您网站上的问题，因为我没有看到完整的代码和设置，所以我无法预测会发生什么。如果您在更改后对您的网站有问题，请向我展示整个代码/尝试将网站上传到服务器，这样我会在现场看到它并能够更好地为您提供帮助。我不知道您从哪里获取示例，但它们不适合您的情况。我建议您在使用它之前阅读您将要使用的 CSS 代码，因为它会帮助您了解它的用途，并且您将能够自己知道它是否适合您的网站。跨度>

以上是关于IE 和谷歌浏览器之间的页脚兼容性不会妥协的主要内容，如果未能解决你的问题，请参考以下文章

怎样解决IE和谷歌的样式兼容问题

为啥我的ajax在IE打开可以在谷歌和火狐打开就不响应请求

iframe在谷歌浏览器中与在ie、火狐中显示不一致问题！

有谁能告诉我，我的网址在360浏览器、ie浏览器可以正常访问，遇到火狐和谷歌浏览器就不能？

我的只有火狐可以上网，ie和谷歌均不行

IE浏览器和谷歌浏览器的互跳