0

この問題はよくあることだと思われますが、特定の問題の解決策をまだ見つけていません。

私の Web ページは、Firefox と Chrome、および Windows 8 の IE10 で完全に正常に表示されます。ただし、他の IE バージョンでは、DIV がすべて台無しになっています。

ウェブサイト: http://d2canton.pitmanstats.com

正しいレイアウト: Google の広告はナビゲーション バーの下にあり、白いコンテンツ セクションの左側に配置され、広告の右側に表 (チームのリスト) があります。

要素を検査し、IE、Chrome、および Firefox を比較した後、ここに問題があるように見えますが、ソースは私が知る限り完全に問題ないように見えます: Internet Explorer では、両方の「clearfix」 「main-fullwidth」の DIV は同じポイントから開始され (各 DIV の上部は他の DIV と同じです)、「ヘッダー」の div の下部と同じ高さになります。

ただし、「main-fullwidth」DIV は、「clearfix」DIV の AFTER/BELOW から開始する必要があります。

なぜこれが起こっているのか理解できないようです。

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」はすべて Google の広告です。

繰り返しますが、Internet Explorer で「clearfix」を実行した後、「main-fullwidth」が正しく開始されず、同じ場所から開始されるという問題があるようです。これにより、広告は左に揃えようとしますが、ナビゲーション メニューのすぐ右に左に揃えられます。

ご不明な点や詳細が必要な場合はお知らせください。これは過去に機能していましたが、最近機能しなくなりました。ありがとうございました！

4

2 に答える 2

1

使用している html5 タグの一部が問題を引き起こしているようです。asideタグは、IE9 でレイアウトを壊す要素の 1 つと思われます。私はそれを古き良きダイブと交換し、それを元に戻しました<section>。IF IE見た目に一貫性を持たせるには、条件付き CSS を作成する必要があります。幸運を。

F12 キーを押して IE でデバッグします。

これが写真です。

ここに画像の説明を入力

于 2012-11-13T03:43:55.053 に答える
0

さらに調査した結果 (CSS グルの同僚と話をして)、SECTION などの "CSS3" タグや " :after " などのスタイルでさえ、IE9 以下ではサポートされていないように思えます。私の "main-fullwidth" DIV に本質的に適用されているスタイルの 1 つは、"clear:both;" でした。しかし、その属性は「:after」スタイルだったため、IE では適用されませんでした。

そこで、「clear:both;」を追加しました。「main-fullwidth」 DIV へのインライン スタイルとして、「clearfix」をオーバーレイするのではなく、「clearfix」の後/下から開始します。

これにより当面の問題が解決されます。Chrome/Firefox は ":after" スタイルなどの "CSS3" を読み取ることができますが、IE ではインライン スタイルを使用して直接 ":after" を適用する必要がありました。

Chrome では機能するが IE では機能しないスタイル (ホバー リンクに表示されるパディングが多すぎるなど) の適用に関して、まだ他の問題がありますが、この特定の質問とは関係ありません。

于 2012-11-13T17:44:16.430 に答える