div中的表?IE7兼容性问题-寻找资源来扩展如何处理IE7问题的知识

Question

我目前正在重新设计这个网站：http://www.palosverdes.com/rpv2012/并且遇到了在div（cnews）中重复渐变的问题。问题是，当在IE7上重复渐变时，会出现颜色问题。图像上的蓝色似乎被某种方式照亮了。当我将属性设置为"不重复"时，我不会获得我希望实现的圆角边缘效果。

这是有问题的代码：

<div class="box-noshadow" id="cnews">
<div id="spotlight">
</div><!--spotlight-->
<div onmouseout="document.getElementById('stop').start();" onmouseover="document.getElementById('stop').stop();" id="stopmarquee">
<div align="center" id="toptitle">
CITY NEWS &amp; EVENTS
</div><!--toptitle-->
<div id="cnewscontainer">
<iframe align="middle" width="400px" scrolling="no" height="100px" frameborder="0" src="scroll_file_b/break2.cfm"></iframe>
</div><!--cnewscontainer-->
</div><!--stopmarquee-->
</div><!--cnews-->

以及相关的CSS:

#cnews {
width: 100%;
background-image:url(images/cnews-back.jpg);
float: left;
padding: 5px;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;}
#spotlight {
width: 50%;
height: 200px;
background-color: yellow;
float: right;
padding: 5px;}
.box {-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(PIE.htc); /* This lets IE know to call the script on all elements which get the 'box' class */}

我可以寻求什么解决方案来让它在现代浏览器中也能正确呈现？我应该使用IE7特定的CSS吗？

此外，我在哪里可以看到与现代浏览器相比，HTML/CSS ie7在解释方面有什么问题？

Answer 1

stopmarquee上的width:50%导致该项目在IE7中下降，而不是在右浮动的spotlightdiv旁边上升。这导致cnews容器进一步向下扩展，然后导致背景图像在"y"方向上重复（如他评论中所述的3ror404）。

背景图像本身有一个颜色偏移，因此图像的顶部比图像的下部更亮，因此当图像在"y"方向上重复时，您会得到更亮的外观。

您可以通过更改为width: 49%来更正stopmarquee的位置（我认为这不会影响您的布局），这可能会解决您的问题。否则，请将背景图像设置为纯色，这样重复操作就不会导致问题。