internet-explorer - IE9 上的 CSS 渲染问题；条件语句不是修复

Question

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

作为测试的第二个措施，我在主样式表上将背景设置为没有圆 Angular 的纯色，以查看它是否适用于 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 个小部件，例如，这可能是没有 float 或负边距的类似布局的基础:

<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+ 中的大填充。