わかりました。今回は非常に簡単な質問です(オンラインのどこにも参照されていないため、答えはわかりにくいようですが)。
それは古典的なものと関係があります:IEのフォーマットの問題。IEがDIV境界線の太さを変更する理由はわかりませんが、ボックスモデルでうまく機能しないのはIEの失敗の一部かもしれないと思います。さらに、もう少し詳しく説明しますが、もう1つの変数があります。DIVのコンテンツは、境界線がIEで適切に表示されるかどうかを条件付けます(他の場所に関係なく適切に表示されます)。
まず最初に、それは単純なDIVであり、そのCSSは次のとおりです。
#menu {
width:1000px;
border-top:#0072FF solid 10px;
border-bottom:#FF0078 solid 20px
}
ただし、IEでは、上下の境界線が約2倍の太さで表示されます。
これは、一方のブラウザともう一方のブラウザでどのように表示されるかを示しています(これは、DIVの一部であり、1000ピクセル幅全体ではありません)。
中には何がありますか?Flashメニューが埋め込まれています。
コードから他のすべてを取り除き、Flashコンテンツに問題があるDIVをテストしました。結果:問題は残ります。
ただし、内蔵フラッシュを取り出しても問題は再現されません。たとえば、テキストコンテンツを挿入すると、問題は再現されません。したがって、明らかにこれはFlashコンテンツおよび/またはそれが埋め込まれている方法と関係があります。(繰り返しますが、これはIEでのみ発生します...大きな驚きです!)
それ以来、いくつかの異なる方法でFlashを埋め込もうとしました(ただし、これまで問題が発生したことはありません)。これは私が現在取り組んでいる方法であり、「IEの問題を回避するための最良の方法」としてそれを推奨するWebサイトから降りました。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1000" height="30" id="menu" align="middle">
<param name="movie" value="./swf/menu.swf"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="./swf/menu.swf" width="1000" height="30">
<param name="movie" value="./swf/menu.swf"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
AC_RunActiveContent.jsの問題かどうかを確認しようとしましたが、そうではありません。
私はいくつかのハックや回避策を試しましたが、役に立ちませんでした。(これらはIEでも機能しますか?同様の問題に遭遇すると* html
、たとえば、機能しなくなったことがわかります。フォーマットの問題は残ります。)回避策は避けたいと思います。この場合は、少なくとも、CSSの回避策は効果がないようです(もちろん、<object>
タグをフォーマットする必要がある場合を除きますが、これが最初です)。
とにかく、どんな洞察も非常に高く評価されます!ありがとう!