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

Question

我目前正在重新设计这个网站:http://www.palosverdes.com/rpv2012/并且遇到了在 div (cnews) 中重复渐变的问题。问题是在 IE7 上重复渐变时，会出现颜色问题。图像上的蓝色似乎以某种方式变亮了。当我将属性设置为不重复时，我没有得到我想要实现的圆 Angular 效果。

这里是有问题的代码:

<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 中下降，而不是在右边 float 的 spotlight< 旁边上升 分区。这导致您的 cnews 容器进一步向下扩展，然后导致您的背景图像在“y”方向上重复(如他的评论中所述的 3rror404)。

您的背景图像本身有颜色偏移，因此图像的顶部比图像的下部更亮，因此当图像在“y”方向上重复时，您看起来会更亮。

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