在IE中不重复的背景图像

这应该是真正简单的...不知道我在这里看不到...背景图像在非IE浏览器中重复得很好，但在IE8中无法正常显示。在IE中不重复的背景图像

网站：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>

来源

2010-07-01 blackessej

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.erisdesigns.net%2FStage%2FMcCampbellInsurance%2Findex.html – reisio 2010-07-01 20:37:29

添加width 100%;到#wrapper

#wrapper { width: 100%; }

是否行得通？

来源

2010-07-01 20:32:48 user375700

@snootles总是那么简单。我错误地认为，最大宽度：100％会照顾到这一点。谢谢！ – blackessej 2010-07-01 20:37:50

你是否在谈论标题图片失败时伸展到大于1000px？如果是这样，这是由于元素的大小，而不是背景问题。

这似乎是由内联样式表中的#wrapper规则display: table引起的，这会导致缩小到适合的行为，缩小到012px的1000px。由于包装器的内容不是表格行元素，因此此规则没有意义。用固定宽度为中心的包装器以外的标题图像和简单的width: 100%来填充页面会更好。

该样式表本身是在一个低级隐藏的条件注释，这将影响除7以外的所有版本的IE，这似乎是一个坏主意......这真的是你的意思，你试图实现什么display: table破解？所有-moz-规则似乎也完全是多余的。这是一个简单的布局，不应该需要黑客。

无关：你还在文件的顶部包含一个XML声明。对于兼容HTML的XHTML，最好省略它，因为它会导致IE6回退到Quirks模式（对IE6来说甚至比正常情况更糟），并且在任何情况下，因为它只指定UTF-8中的XML 1.0，它们是无论如何，默认值是毫无意义的。对于兼容HTML的XHTML，您应该将charset参数设置为标记为<meta http-equiv="Content-Type">的UTF-8。

来源

2010-07-01 20:41:54 bobince

那么，你应该通过服务器发送内容类型，标记是没有意义的。 – reisio 2010-07-01 20:54:14

在IE中不重复的背景图像

回答

相关问题