2

私が取り組んでいるページは、IE 7 & 8を除いて、Chrome、Firefox、Opera、Safari (Mac と Windows の両方) で完全に表示されます。ヘッダーは次のようになります。 ここに画像の説明を入力

しかし、IE では次のように表示されます。 ここに画像の説明を入力

position: relative;ファイル内のクラスcontainerに使用する前にcharity.css、ドロップダウン メニューを使用して IE で問題が発生していたため、それを削除する必要がありました。

誰かが私を助けてくれますか?! 私は今、アイデアがありません:(

これが[ページ]です（ただし、後でリンクを削除する必要があります）どんな助けも大歓迎です!!

編集済み:ここに jsfiddle があります: http://jsfiddle.net/walahh/QwFL6/まったく同じページではありませんが、うまくいけばアイデアが得られます。

4

2 に答える 2

1

私が思いつく唯一の変更は、マークアップに多少大きな変更をもたらすものです。

基本的に、これは要素がクリアされていないことに関係しているfloat:leftと確信しています。float:rightIE は、float を意図していない要素に float プロパティを誤って伝達することで有名です。これを避けるために - 浮いているとき - このようなことをするのが一般的です...

CSS:

.fl { float: left; }
.fr { float: right; }
.clr { clear: both; }

そして、マークアップでこれを行います：

<div>
  <div class="fl"></div> 
  <div class="fl"></div> 
  <div class="clr"></div><!-- This element stops float from going to unintended elements --> 
</div>

これは、クロス ブラウザーのサポートのためにフローティング要素を配置する方法として理想的です。

マークアップを作り直すことができない場合はclear: both;、浮動要素の最後の兄弟として、スタイルを使用して空の要素を追加してみてください。だから... ul#secondNav を例にとると、これを試すことができます...

<ul id="secondNav">
  <li class="stuff"></li>
  <li class="stuff"></li>
  <li class="stuff"></li>
  <li style="clear: both;"><!-- Leave empty --></li>
</ul>
于 2012-09-10T18:36:27.897 に答える
0

どうやら修正は非常に簡単だったようです....私はそれを複雑にしすぎていました。

私が (また) 知らなかったのは、「IE では、z-index は含まれる要素の z-index より高くすることはできません」ということでした。

そこで、彼らが持っていた元のファイルに戻り、そのまま.container{width:940px; margin:0 auto; position: relative;}残しました。次に、の z-index 値を追加し、それで#header{.....; z-index:1; }処理されまし#mainNav{...; z-index:2;}た...

  • 非表示のドロップダウン メニュー
  • めちゃくちゃなヘッダー

変更されたコードは次のとおりです: http://jsfiddle.net/walahh/QwFL6/3/

これが誰かの助けになることを願っています:)そして、私の投稿を読んで助けてくれたすべての人に感謝します.

于 2012-09-11T21:34:02.877 に答える