0

我有一个可以在 IE9 / Chrome / FF / Safari 中正常运行的网站，但是在 IE8 中查看时会出现一大堆问题。为了帮助解决这个问题，我一直在样式元素下的标题中添加条件 css for（仅限 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; }
4

1 回答 1

0

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

这是您的 IE8-only 样式元素：

<!-- 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
*/

(...)
于 2013-10-31T20:57:08.180 回答