Question

在过去的几天里，我一直根据我画的一些艺术品为我的网站设计布局。在Chrome和Firefox上的布局非常好，然后我检查了IE，它看起来很糟糕。

我知道只有IE 7支持固定位置，但它对我不起作用...而且我已尝试过十种不同的代码，应该允许图像移动到右下角但是我的布局有多少层，它不起作用。

如您所见，我在IE上遇到两个问题。我的整个布局被移过来，我的主横幅图像不在右下方。我想知道是否有人可以查看此代码并帮助我找出解决此烦人错误的方法。希望我发布这个权利。

<code>
<!-- language: lang-css -->

* { margin:0;}
body {
    background-color:#2397b6;
    background-image: url("mainbackgroundrepeat1"); 
    background-repeat: repeat-x;
    background-position:bottom;
    background-attachment:fixed;
    height:100%;
    }

a:link { color:#2b8c56;}
a:visited {color:#2b8c56;}
a:hover {color:#f0faef;}

#banner_wrap{
    width: 100%;
    display: block;
    position:fixed;
    bottom:0;
    margin-left:800px;
    width:500px;
    z-index:-1; 
    height: 353px;

}

#logo_wrap {
    position:absolute;
    width:600px;
        margin-left:200px;
    margin-top:2px;
 }

#wrap {
    position:absolute;
    width: 580px;
    min-height:100%;
    height: auto;
    margin: 180px 0 -353px 180px;
    background-color:#b2d6df;
    border: 10px solid #2b8c56;
    text-align: left;
        padding: 10px;
 }

#footer {
    font-size: .75em;
    font-style: italic;
    text-align: left;

}
/* START NAVIGATION */

#centeredmenu {
   float:left;
   width: 600px;
   margin-left:180px;
   margin-top:100px;
   background:#b2d6df;
   border: 10px solid #2b8c56;
   overflow:hidden;
   position:absolute;
}
#centeredmenu ul {
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   width: 77px;
   padding:9px;
   margin:0 12px 0 12px;
   border-bottom: 4px solid #5bc668;
   color:#000;
   text-decoration:none;
   font-variant:small-caps;
   letter-spacing:2px;
   font-weight:500;
   line-height:.7em;
}
#centeredmenu ul li a:hover {
   border-bottom:4px solid #f0faef;
   color:#000000;
}
/* END NAVIGATION */
</code>

Answer 1

浏览器以怪癖模式显示您的网站，这就是您的布局被破坏的原因。将您的文档类型更改为

<!doctype html>

另外，请注意绝对定位不利于创建布局。

Answer 2

我建议采用不同的策略来标记和设置主要内容，而不是试图找出解决问题的方法。首先，不是将文本内容直接放入div并使用break标记来分隔段落，而是将它们放在段落中。默认情况下，它们是块元素，并且会为您的内容创建自然分离（您正在使用某些css重置，因此您可能需要在段落标记中添加一些边距底部样式。）其次，如果您要去使用position：absolute，然后使用top：，left：等来定位你的元素，而不是边距。

Answer 3

我无法想象你做这种事的方式是什么原因。为什么你需要在你的情况下固定和绝对。只需添加一个id为包装器的div作为body元素的直接子元素，并将所有其他div放在其中，给它一个余量：0 auto，将其居中。比你还可以给它一个位置：相对和其他div在它的位置：绝对的进一步syling。即使在IE9中，您的布局看起来也很糟糕删除所有边距左侧。你有一个非常简单的设计。你可以作为

div#wrapper
{
width: 960px;
margin: 0 auto;
}

接下来将图像放在body元素的背景图像中的div＃banner_wrap中，因为body元素已经有一个固定的背景图像属性，所以它会运行相同的方式，你不需要添加另一个div

Answer 4

尝试将banner_wrap更改为

    #banner_wrap{
    position:fixed;
    z-index:-1; 
    right: 0px;
bottom: 0px;

}

Answer 5

您的mark-up确实需要一些工作，但随着您获得更多经验，您将获得更好的理解。而不是使用否定的z-index并将图像放在div底部的mark-up中，另一种可能的解决方案是将页面包装在包装div中，即比您的页面大一些，并将background-image设置为您的海狮的fixed并将其{{1}}放在左侧。

查看此更新的，现在正在运行的版本，JSfiddle：http://jsfiddle.net/84qAg/1/

希望这对所有人都有帮助，祝你好运。

位置：固定和IE

5 个答案: