Question

这应该是非常简单的...不确定我在这里没有看到...背景图片在非IE浏览器中重复得很好但在IE8中却没有。

网站：http://www.erisdesigns.net/Stage/McCampbellInsurance/index.html

#wrapper {
    max-width:100%;
    min-width:1000px;
    min-height:100%;
    margin:0 auto;
    background-image:url(images/shadowborder.png);
    background-repeat:repeat-y;
    background-position:center;
    margin-bottom:-70px;
    position:relative;
    overflow:auto;
}

#headwrapper {
    position:relative;
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-image:url(images/btr_rpt.jpg); /* NO REPEAT!!! */
    background-repeat:repeat-x;
    height:150px;
}

#header {
    position:relative;
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-color:transparent;
    background:url(images/KMIAFS_banner.jpg) center top no-repeat;
    height:150px;
}

#menu {
    clear:left;
    float:left;
    padding:0;
    border-top:5px solid #003a72;
    width:100%;
    overflow:hidden;
    height:70px;
}

#spacer {
    height:70px;
    clear:both;
}

#footer {
    position:relative;
    height:70px;
    width:100%;
    border-top:5px solid #003a72;
    background-color:#bec8e3;
    text-align:center;
    color:#666;
    margin:0 auto;
    margin-top:-70px;
    clear:both;
}

HTML：

</head>
<div id="wrapper">
<div id="headwrapper">
<div id="header"></div>
     <div id="menu">
       <ul>
          <li class="active"><a href="#" title="">/a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
       </ul>        
         </div>
</div>
</div>

Answer 1

将width 100%;添加到#wrapper

#wrapper { width: 100%; }

有效吗？

Answer 2

您是否在谈论标题图像无法延伸到大于1000px？如果是这样，这是由于元素的大小，而不是背景问题。

这似乎是由内联样式表中display: table上的规则#wrapper引起的，这会导致缩小到适合的行为，缩小到1000px的min-width。此规则没有意义，因为包装器的内容不是表行元素。最好使用固定宽度居中包装外的标题图像，并使用普通width: 100%来填充页面。

那个样式表本身是一个下层隐藏的条件评论，它将影响除7之外的所有IE版本，这似乎是一个坏主意......这真的是你的意思，你试图用{{ 1}}黑客？所有display: table规则似乎也完全是多余的。这是一个简单的布局，不需要黑客攻击。

不相关：您还在文件顶部包含了一个XML声明。对于HTML兼容的XHTML，最好省略这一点，因为它会导致IE6回退到Quirks模式（甚至比IE6更糟糕的渲染），并且在任何情况下，因为它只指定了UTF-8中的XML 1.0，这是无论如何，这是默认的，这是毫无意义的。对于HTML兼容的XHTML，您应该在-moz-标记中将charset参数设置为UTF-8。

在IE中不重复的背景图像

2 个答案: