CSS问题与IE8 [英] CSS issue with IE8

问题描述

制作一个新网站，但在IE8中发生了一些事情。社交栏正对齐，不像所有其他浏览器中的浮动，所以它然后在幻灯片下面推动导航栏和搜索栏。我已经有html5 shiv在那里了。

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

我为IE8遗漏了什么？任何帮助是感谢。

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

推荐答案

我认为对于某些版本的IE布局浮动正确应用于v8），它们必须位于html中的其他元素之前。

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.

我经常发现inline-blocks + text-align属性对于这种类型的东西比浮点数更有用。这样的东西可能更多你想要的：

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/

这两个50％宽的内联块的诀窍是将标签合并在一起 - < / span>< span> - 没有空格。空格将使它们换行到单独的行。

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.

这篇关于CSS问题与IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！