Question

我有一个可以在IE9 / Chrome / FF / Safari中运行的网站，但是在IE8中查看时有一大堆问题。为了帮助解决这个问题，我一直在样式元素下的标题中添加条件css（仅限IE8）来修复问题（我知道这不是正确的方法）。我的计划是在完成后将所有内容包装成新的样式表。

我在标题末尾和任何其他样式表之后添加了样式元素，因此不应该有任何其他样式覆盖新的css。这是关于我试图改变的第10个元素，这个技术一直到现在为止，但现在我已经找到了一个不会采用新风格的元素。

我可以更改原始样式表以获得所需的结果，但由于某种原因，标题中添加的CSS对这些元素没有影响。

我已经尝试禁用其他其他样式表加载但没有效果。

我禁用了我的缓存插件。

我真的在这里结识，任何想法都会非常感激。

作为参考，我试图改变.text和.image元素的宽度，同时也改变h2字体大小和行高。

网站可在此处找到http://fertileweb.com/demosite

HTML

<div class="infoBox">
<div id="rfid" class="info">
<div class="image">
<img class="attachment-post-thumbnail wp-post-image" width="477" height="589" alt="RFID_image" src="http://localhost/orh/wp-content/uploads/2013/08/RFID_image1.jpg">
</div>
<div class="text">
<div class="top">
<img alt="" src="http://localhost/orh/wp-content/uploads/2013/08/RFID_section.png">
<h2>RFID Tagging of Sperm, Eggs and Embryos</h2>
</div>
<p>
ORH is the first clinic in the USA and the only one in Washington state to use radio frequency ID tagging to track your eggs, sperm and embryos for all fertility treatments - Inseminations (IUIs), and IVF or ICSI procedures, Donor Egg or Donor Sperm.
<a href=""></a>
<span>......because your Peace of Mind matters</span>
</p>
</div>
</div>

原创CSS

 .infoBox { width: 99.5%; float: left; padding-top: 10px; }
.infoBox .info { width: 98.5%; float: left; margin-top: 50px; border-left: 3px solid #459b45; }
.infoBox .image { float: right; max-width: 480px; }
.infoBox .text { float: none; max-width: 605px; padding-left: 23px; }
.infoBox .top { width: 100%; min-height: 250px; }
.infoBox .top img { float:left; padding: 10px 10px 0 0; }
.infoBox h2 { color: #090405; font-size: 46px; font-family: 'Raleway', sans-serif; font-weight: 200; line-height: 54px; }
.infoBox p { color: #3d3d3d; font-size: 17px; max-width: 600px; line-height: 33px; font-family: 'Raleway', sans-serif; font-weight: 300; padding-left: 85px; }

到目前为止，我尝试过一些不同的派生来改变.text元素的宽度。

.infoBox .text { max-width:500px;}
.infoBox .info .text {max-width:500px;}
.infoBox #rfid .text {max-width:500px;}
.infoBox .info .text .top {max-width:500px;}
.infoBox #rfid .text .top {max-width:500px;}
.contantcntr .infoBox .text { max-width:500px;}
.contantcntr .infoBox .info .text {max-width:500px;}
.contantcntr .infoBox #rfid .text {max-width:500px;}
.contantcntr .infoBox .info .text .top {max-width:500px;}
.contantcntr .infoBox #rfid .text .top {max-width:500px;}
.infoBox .text { width:500px;}
.infoBox .info .text {width:500px;}
.infoBox #rfid .text {width:500px;}
.infoBox .info .text .top {width:500px;}
.infoBox #rfid .text .top {width:500px;}
.contantcntr .infoBox .text {width:500px;}
.contantcntr .infoBox .info .text {width:500px;}
.contantcntr .infoBox #rfid .text {width:500px;}
.contantcntr .infoBox .info .text .top {width:500px;}
.contantcntr .infoBox #rfid .text .top {width:500px;}
.infoBox .text { float: none; max-width: 500px; padding-left: 23px; }

Answer 1

我尝试验证您的HTML和CSS代码，但失败了。这应该是调试的第一步。

这是你的IE8风格元素：

<!-- IE8 css fixes -->
<style>
.infoBox .text { float: none; max-width: 605px; padding-left: 23px; }

<!--[if IE 8]>

/* many CSS rules */

</style>
<![endif]-->

您的条件注释应包含style元素。这里你的开场CC是里面元素。 AFAIK它不起作用。

然后，与IE8无关，style.css在样式表的最开头没有斜杠：

*
 comment
*/

(...)

重复样式不会覆盖IE8中的原始样式

1 个答案: