IE9上的CSS渲染问题;条件声明不是修复

Question

嘿，大多数情况下，IE9呈现我的Wordpress基于网站就好了。我很高兴我的意思是现在可以接受。唯一的问题是IE9不显示我的主页小部件标题的背景或文本。对于Firefox，Chrome，Safari等浏览器等，我使用的是带有白色文本和圆角的红色渐变背景，这当然可以正常工作。对于IE9，我添加了条件语句来将小部件标题的背景设置为没有圆角的纯红色。不幸的是，这并没有解决问题。背景仍然不显示。疯狂的事情是，当我在我的Mac上使用Wine打开IE7中的网站时，小部件标题背景显示为纯色...

作为测试的第二项措施，我将背景设置为纯色在主样式表上没有圆角来查看它是否可以在IE9中使用。当然，它没有。即使主CSS文件改变了小部件标题的背景/文本仍然没有显示出来。我真的不知道什么是错的，我想知道我能否得到一些帮助。

您可以将bso.larryandpriscilla.com

好吧，窗口小部件标题这里是代码找到网站。有没有其他的代码会有帮助？

.widget-title { 
    color: #fff; 
    width:300px; 
    margin-left: -1px; 
    height:30px; 
    margin-top: -30px; 
    text-align: center; 
    text-shadow: rgba(0,0,0,.5) 1px 1px 1px; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: 400; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-right-radius: 10px; 
    -webkit-border-top-left-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    border-top-left-radius: 10px; 
    background: #A50000; /* old browsers */ 
    background: -moz-linear-gradient(top, #A50000 0%, #670000 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A50000), color-stop(100%,#670000)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A50000', endColorstr='#670000',GradientType=0); 
} 

这是我使用的条件语句。我不知道，如果事情，但我把它放在头文件的标题部分：

<!--[if gt IE 6]> 
<style type="text/css"> 
    .widget-title { 
     color: #fff; 
     background-color: #A50000; 
     width:300px; 
     margin-left: -1px; 
     height:30px; 
     margin-top: -30px; 
     text-align: center; 
     font-family: Helvetica, Arial, sans-serif; 
     font-weight: 400; 
} 
</style> 
<![endif]--> 

这是当前条件注释：

<!--[if IE]> 
<style type="text/css"> 
    .widget-title { 
     color: #fff; 
     background-color: #A50000; 
     width:300px; 
    margin-top: 0px; 
     margin-left: -1px; 
     height:30px 
     text-align: center; 
     font-family: Helvetica, Arial, sans-serif; 
     font-weight: 400; 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A50000', endColorstr='#670000',GradientType=0); 
} 
</style> 
<![endif]--> 

Answer 1

在IE8（感谢你使我的工作隐藏浏览器升级消息！），小部件标题在那里，但margin-top:-30px正在将它们转移到小部件内容下方。我会看看一般的布局，因为我拿出了margin-top，出现了一些滚动条。特别是您有<li>元素不在<ul>或<ol>之内。浏览器在渲染页面时必须对丢失的元素进行最佳猜测。我会开始制作page validate。另一个想法可能是加价3个部件不同，例如这可能是一个类似的布局，而不浮或负利润的基础：

<style type="text/css"> 
    ul { list-style-type:none; } 
    li { display:inline-block; } 
</style> 
<ul> 
    <li> 
     <h4>Title</h4> 
     <div>Content</div> 
    </li> 
    <li> 
     <h4>Title</h4> 
     <div>Content</div> 
    </li> 
    <li> 
     <h4>Title</h4> 
     <div>Content</div> 
    </li> 
</ul> 

为inline-block很好地支持你的目标浏览器。

希望这是有用的。

编辑：查看您的条件注释更详细＆hellip;如果它们与style.css中的相同，则不需要重复这些属性。虽然this demo不会重新创建问题，但您应该能够看到条件注释的差异，即只出现在IE6 +中的大填充。