嘿伙计们,在大多数情况下,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]-->
答案 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 +中出现的大填充。