正在创建一个新站点,但在 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
最佳答案
我认为对于某些版本的 IE 来正确布局 float (我记得这确实适用于 v8),它们必须位于 html 中的其他元素之前。
<div>
<p>Paragraph floated right</p>
<p>Unfloated content</p>
</div>
现代浏览器不关心 float 是在其余内容之前还是之后,但 IE 需要它在前。
我经常发现 inline-blocks + text-align 属性对于这类事情比 float 更有用。像这样的东西可能更符合您的需求:
这两个 50% 宽的行内 block 的技巧是将标签混合在一起 - </span><span>
- 没有空格。空格会使它们换行。
关于IE8 的 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11089945/