0

新しいサイトを作成していますが、IE8 で何かが起こっています。ソーシャル バーは、他のすべてのブラウザーのように右に浮いていないため、ナビゲーション バーと検索バーをスライドショーの下に押し込んでいます。私はすでにhtml5 shivもそこに持っています。

#header-right { width: 560px; height: 400px; margin-top: 30px; float: right; height: 189px;}
.social-widget { width: 100%; height: 46px; display: block;}
.social-widget p {float: right;}
.social-widget img {margin: 0 5px 0 5px; float: left;}
.search-widget { width: 400px; float: right;}

#banner { margin-top: 240px; clear: both; width: 1003px; margin: 0px auto;}

HTML

<div id="header-right">

    <span class="social-widget"><?php dynamic_sidebar( 'social-media-widget' ); ?></span>

    <nav id="access" role="navigation">
        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- #access -->

    <span class="search-widget"><?php dynamic_sidebar( 'search-widget' ); ?></span>
</div><!-- #header-right -->

</header><!-- header -->

IE8 には何が欠けていますか? どんな助けでも大歓迎です.c

4

2 に答える 2

1

IE の一部のバージョンでは、フロートを適切にレイアウトするには (これは v8 にも適用されることを思い出すようです)、それらは html 内の他の要素の前に配置する必要があると思います。

<div>
  <p>Paragraph floated right</p>
  <p>Unfloated content</p>
</div>

最近のブラウザはフロートが残りのコンテンツの前か後かを気にしませんが、IE はそれを最初に望んでいます。

inline-blocks + text-align プロパティは、フロートよりもこの種のものに役立つことがよくあります。このようなものは、あなたが望むものかもしれません:

http://jsfiddle.net/euNa5/17/

これら 2 つの 50% 幅のインライン ブロックの秘訣は、タグを一緒にマッシュアップすることです (</span><span>空白は使用しません)。空白はそれらを別々の行に折り返すようにします。

于 2012-06-18T19:57:02.120 に答える
0

これでは、HTML5、つまり<header></header>タグを使用しています。ヘッダーの代わりに div を使用してみてください...

http://jsfiddle.net/LL7YV/5/

IE8での動作を確認してください...

于 2012-06-19T07:23:19.273 に答える