0

这应该很简单...不确定我在这里没有看到什么...背景图像在非 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>
4

2 回答 2

1

添加width 100%;到#wrapper

#wrapper { width: 100%; }

它有效吗？

于 2010-07-01T20:32:48.903 回答
0

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

这似乎是由内联样式表中的规则引起的display: table，#wrapper这会导致缩小以适应行为，缩小到min-width1000 像素。这个规则没有意义，因为包装器的内容不是表格行元素。最好在固定宽度居中的包装器之外使用标题图像并使用纯文本width: 100%填充页面。

该样式表本身位于一个下层隐藏的条件注释中，它将影响除 7 之外的所有 IE 版本，这似乎是个坏主意……这真的是你的意思吗，你试图通过display: tablehack 实现什么？所有的-moz-规则似乎也完全是多余的。这是一个简单的布局，不需要 hack。

无关紧要：您还在文件顶部包含了一个 XML 声明。对于 HTML-compatible-XHTML，最好省略它，因为它会导致 IE6 回退到 Quirks 模式（甚至比 IE6 的正常渲染更差），并且无论如何，因为它仅指定 UTF-8 中的 XML 1.0，它们是无论如何，默认值是没有意义的。对于 HTML-compatible-XHTML，您应该在标签中将charset参数设置为 UTF-8 。<meta http-equiv="Content-Type">

于 2010-07-01T20:41:54.683 回答