Question

嘿伙计们，在大多数情况下，IE9渲染基于Wordpress的网站就好了。很好，我的意思是现在可以接受。唯一的问题是IE9没有显示我的主页小部件标题的背景或文字。对于Firefox，Chrome，Safari等浏览器。我使用红色渐变背景，白色文字和圆角，当然工作正常。对于IE9，我添加了一个条件语句，将小部件标题的背景设置为纯红色，没有圆角。不幸的是，这并没有解决问题。背景仍然没有显示出来。疯狂的是，当我在Mac7上使用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。

希望这很有用。

修改：更详细地查看条件评论...如果属性与style.css相同，则无需重复这些属性。虽然 this demo 不能完全重新创建问题，但您应该能够看到条件评论所产生的差异，即仅在IE6 +中出现的大填充。

IE9上的CSS渲染问题;条件语句不是修复

1 个答案: