CSS issue with IE8

问题:

Making a new site but something is happening to it in IE8. The social bar is aligning down and not floating right like it does in all other browsers, so it's then pushing the navigation bar and search bar down under the slideshow. I already have the html5 shiv in there as well.

#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 -->

What am I missing for IE8? Any help is appreciated.c

回答1:

I think for some versions of IE to layout floats properly (and I seem to recall this does apply to v8), they must precede the other elements in the html.

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

Modern browsers don't care if the floats come before or after the rest of the content, but IE wants it first.

I often find that inline-blocks + text-align properties are more useful for this sort of thing than floats. Something like this might be more what you want:

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

The trick with these two 50% wide inline-blocks is to mash the tags together - </span><span> - no whitespace. Whitespace will make them wrap onto separate lines.

回答2:

In this you are using HTML5 i.e, <header></header> tag, try to use div in place of header...

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

See its working in IE8...