Question

我上下搜索过这个问题，这似乎很常见，但我还没有找到解决我具体问题的方法。

我的网页在Firefox和Chrome以及Windows 8上的IE10中显示得非常好。但是，任何其他IE版本都让我的DIV都搞砸了。

网站：http://d2canton.pitmanstats.com

正确布局：Google广告位于导航栏下方，并与白色内容部分左侧对齐，并在广告右侧显示表格（团队列表）。

在检查元素并在IE，Chrome和Firefox之间进行比较之后，这似乎是问题所在，但据我所知，源代码看起来非常好：在我看来，在Internet Explorer中，两者都是“clearfix”和“main-fullwidth”DIV从同一点开始（例如，每个DIV的顶部都是另一个），与“header”div的底部齐平。

但是，“main-fullwidth”DIV应该在“clearfix”DIV之后/之后开始。

我似乎无法理解为什么会这样。

以下是index.php的相关代码：

<body class="home blog custom-background">
<div id="container">
    <?php include('includes/header.php'); ?>
    <?php include('includes/outer_nav.php'); ?>
    <div id="main-fullwidth">
<section style="display:block; overflow: hidden; border: 0px; padding:0px; ">
    <aside style="display:block; float: left; width: 180px; ">
        <?php include('includes/left_sidebar.php'); ?>
    </aside>
    <div style="margin-left:180px;">
        <?php include('includes/inner_header.php'); ?>
<!-- CONTENT STARTS HERE -->
<!-- CONTENT ENDS HERE -->
    </div>
</section>
    </div><!-- #main-fullwidth -->

这是outer_nav.php（包含“clearfix”）：

<div class="clearfix">
    <div class="menu-primary-container">
        <ul id="menu-custom-primary-menu" class="menus menu-primary">
            <li id="menu-item-241" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-241"><a href="http://www.pitmanstats.com" >Home</a></li>
            <li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="http://www.pitmanstats.com/pages/" >My Pages</a>
            <ul class="sub-menu">
                <li id="menu-item-242" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-242"><a>DII Canton District</a></li>
                <li id="menu-item-243" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-243"><a>DIII Wooster District</a></li>
                <li id="menu-item-245" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-245"><a>Triway Basketball</a></li>
                <li id="menu-item-244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-244"><a>Quarter&#8217;s Corner</a></li>
            </ul>
            </li>
            <li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a href="http://www.pitmanstats.com/mobile/" >Mobile Apps</a></li>
            <li id="menu-item-240" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-240"><a>About</a>
            <ul class="sub-menu">
                <li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="http://www.pitmanstats.com/about/about-me/" >About Me</a></li>
                <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="http://www.pitmanstats.com/about/history-of-pitmanstats-com/" >History of PITmanStats.com</a></li>
                <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="http://www.pitmanstats.com/about/contact/" >Contact</a></li>
            </ul>
            </li>
        </ul>
    </div><!--.primary menu-->
    <div id="topsearch">
        <div id="search" title="Type and hit enter">
            <form method="get" id="searchform" action="http://www.pitmanstats.com/"> 
                <input type="text" value="Search" name="s" id="s"  onblur="if (this.value == '')  {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" />
            </form>
        </div><!-- #search -->
    </div><!-- topsearch -->
</div><!-- clearfix -->

然后所有“left_sidebar.php”都是谷歌广告。

同样，在我看来，这是“主要全宽”在Internet Explorer中没有正确启动AFTER“clearfix”的问题，而是从同一位置开始。这会导致广告尝试左对齐，但它会立即左对齐导航菜单的右侧。

如果您有任何疑问或需要更多详细信息，请与我们联系。这在过去有效，但最近停止了工作。谢谢！

Answer 1

好像你正在使用的某些html5标签导致了这个问题。 aside标记似乎是破坏IE9中布局的元素之一。我用一次很好的旧潜水重新训练了它，然后把它放回<section>。你只需要制作一些IF IE条件css，使它看起来一致。祝你好运。

使用点击F12在IE上调试它。

这是一张照片。

enter image description here

Answer 2

经过进一步的研究（与CSS guru同事交谈），听起来像“CSS3”标签，如SECTION，甚至IE9及以下版本中都不支持“：after ”等样式，这可以解释为什么IE10工作正常。我的“主要全宽”DIV固有地应用的一种风格是“清楚：两者都有”。但由于该属性采用“：after”风格，因此未在IE中应用。

所以，我补充说“明确：两者都是;”作为“主要全宽”DIV 的内联样式，现在它在“clearfix”之后/之下开始，而不是覆盖它。

这解决了手头的问题。 Chrome / Firefox可以读取“CSS3”之类的内容，例如“：after”风格，但在IE中，我必须直接使用内联样式应用“：after”才能使用。

我在使用样式（例如悬停链接显示方式太多填充）时仍然存在其他问题，这些问题适用于Chrome但不适用于IE，但它与此特定问题无关。

仅限Internet Explorer的DIV对齐问题

2 个答案: