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

时间:2011-04-04 19:30:48

标签: css internet-explorer css3 internet-explorer-9

嘿伙计们,在大多数情况下,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]-->

1 个答案:

答案 0 :(得分: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 +中出现的大填充。