1

私たちのサイトでは、IE (7 と 8 でテスト済み) のみで非常に厄介なレイアウトの問題が発生しました。Firefox と Chrome は正常に動作します。問題は次のページにあります。

http://www.foe.co.uk/community/campaigns/climate/rio_resources_33589.html

問題のコードは、レポートの画像がテキストの左側に表示され、右側に表示されることです。アイテムを含むシンプルなものがあり、インナーは左にフロートし、もう 1 つは左にフロートします。両方の幅は合計よりも小さく、外側の DIV よりも小さくなります。動作しないコードの例を次に示します。

<div class="resourceitem">
    <div class="resourceleft">
        Test LEFT
    </div>
    <div class="resourceright">
        Test RIGHT
    </div>
</div>

関連する CSS は次のとおりです。

.resourceitem {
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
}

div.resourceleft {
    float: left;
    margin-left: 20px;
    width: 156px;
}

div.resourceright {
    float: left;
    padding: 0;
    width: 268px;
}

どんな助けでも大歓迎です、それは私を夢中にさせています!

乾杯、クリス。

更新 - 修正しました。

ああ。OK、問題を発見しました。それは、レスポンシブ リンク コードと、実際には適用されないルールを示す IE8 の開発者ツールにかかっていました。このルールは fms-res.css ファイルにありましたが、これはメディア クエリを理解し、幅が 980px を超えるブラウザでのみ使用されます。IE8 はデフォルトを使用します。m-equiv.css というデスクトップ専用ファイル - このファイルにはルールがありませんでした。Web 開発者ツールバーは、fms-res.css ファイルの要素にルールが適用されていることを示していますが、実際には適用されていません。開発者ツールのこの効果を忘れていました。通常、印刷スタイルシート (print.css) ルールが適用されていなくても (実際に印刷しない限り) 表示されます。

貢献してくれた人々に大いに感謝します。申し訳ありませんが、最終的には愚かな修正でした。

乾杯！

4

2 に答える 2

1

次のコードから削除</a>します。これは余分なコード (タイプミスの可能性があります) であり、IE で問題を引き起こしています:

<div class="resourceleft">
    <img border="0" alt="Rio+20: Is this it?" src="http://www.foe.co.uk/imgs/Rio_-_is_this_it.png" />
    </a>
</div>

注：すべて<div class="resourceleft">に余分なものがあります</a>

于 2012-08-24T12:21:38.820 に答える
0

更新-修正しました。

ああ。問題のある人を見つけました。レスポンシブリンクコードと、実際には適用されないルールを表示するIE8の開発者ツールにかかっていました。このルールはfms-res.cssファイルにありましたが、これはメディアクエリを理解し、幅が980pxを超えるブラウザでのみ使用されます。IE8はデフォルトを使用します。m-equiv.cssと呼ばれるデスクトップ専用ファイル-このファイルにはルールがありませんでした。Web開発者ツールバーは、実際には適用されない場合でも、fms-res.cssファイルの要素に適用されるルールを非常に役に立たないように表示します。開発者ツールのこの効果を忘れてしまいました。通常、印刷スタイルシート（print.css）のルールは適用されませんが、（実際に印刷する場合を除いて）表示されます。

貢献の人々に大いに感謝します、申し訳ありませんが、それは結局そのような愚かな修正でした。

乾杯！

于 2012-08-24T14:37:41.950 に答える