0

IE9 / Chrome / FF / Safari で問題なく動作するサイトを持っていますが、IE8 で表示すると多くの問題が発生します。これを修正するために、スタイル要素の下のヘッダーに (IE8 のみ) の条件付き css を追加して、問題を修正しました (これが正しい方法ではないことはわかっています)。私の計画は、完了後にすべてを新しいスタイルシートにまとめることでした。

ヘッダーの末尾付近と他のスタイルシートの後にスタイル要素を追加したので、新しい 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 専用のスタイル要素は次のとおりです。

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

<!--[if IE 8]>

/* many CSS rules */

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

条件付きコメントはstyle要素をラップする必要があります。ここで、開始 CC は要素内にあります。私の知る限り、それは機能しません。

次に、おそらく IE8 とは無関係ですが、style.cssにはスタイルシートの最初にスラッシュがありません。

*
 comment
*/

(...)
于 2013-10-31T20:57:08.180 に答える