0

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

我的网页在 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 中的“clearfix”之后，“main-fullwidth”没有正确启动，而是从同一位置开始。这导致广告尝试向左对齐，但它立即向左对齐导航菜单的右侧。

如果您有任何问题或需要更多详细信息，请告诉我。这在过去有效，但最近停止工作。谢谢！

4

2 回答 2

1

似乎您正在使用的一些 html5 标签导致了问题。aside标签似乎是破坏您在 IE9 中的布局的元素之一。我用一个很好的旧潜水代替了它，它把它放回了<section>. 您只需要制作一些IF IE有条件的 css 以使其看起来一致。祝你好运。

使用 F12 在 IE 上调试它。

这是一张照片。

在此处输入图像描述

于 2012-11-13T03:43:55.053 回答
0

经过进一步研究（与 CSS 大师同事交谈），听起来像是 SECTION 之类的“CSS3”标签，甚至IE9 及以下版本不支持诸如“ :after ”之类的样式，这可以解释为什么 IE10 可以正常工作。固有地应用于我的“main-fullwidth” DIV 的样式之一是“clear:both;”。但由于该属性是 ":after" 样式，它并没有在 IE 中应用。

所以，我添加了“clear:both;” 作为“main-fullwidth” DIV 的内联样式，现在它在“clearfix”之后/下方开始，而不是覆盖它。

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

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

于 2012-11-13T17:44:16.430 回答