IE8的CSS问题

时间:2012-06-18 19:46:16

标签: css internet-explorer header

创建一个新网站,但在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我缺少什么?感谢任何帮助。

2 个答案:

答案 0 :(得分:1)

我认为某些版本的IE可以正确布局浮动(我似乎记得这适用于v8),它们必须先于html中的其他元素。

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

现代浏览器并不关心浮动内容是在其他内容之前还是之后,但IE首先想要它。

我经常发现内联块+文本对齐属性对于这类事物比浮点更有用。这样的事情可能更符合您的要求:

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

使用这两个50%宽的内联块的技巧是将标签混合在一起 - </span><span> - 没有空格。空格将使它们包裹在不同的行上。

答案 1 :(得分:0)

在此您使用 HTML5 <header></header>标记,尝试使用div代替标题...

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

看它在IE8中工作......