13

バックグラウンド

私は現在、レスポンシブWeb サイトの最終 QA に取り組んでおり、IE 8 と IE 7 に問題があります。クライアントは政府との契約を扱っているため、Web サイトは IE 8 と IE 7 と互換性がある必要があります。Modernizr を使用しています。このプロジェクト用にカスタムビルドされた WordPress テーマのフッターにModernizr をロードしています。doctype やその他の明白なコードが欠けているわけではありません。

次のスクリプトを使用しています。これらはすべて、WordPress のフッターに読み込まれます。

状況

<header>タグを自動的に閉じる IE 8 に問題があります。まず、この問題を確認するために 2 つのユーティリティを使用しました。

  1. IETester
  2. IE 11 を IE 8 にエミュレートし、IE 8 ユーザー エージェントを使用

ここに正しい出力があります

<div class="wrapper main-header">
    <header class="container">
        <div class="sixteen columns alpha omega">
            <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
            <div class="wrapper main-navigation desktop">
                <nav id="nav" class="six columns alpha omega">
                    ...
                </nav>
                <div class="eight columns alpha omega overlay" style="display: none;">
                    ...
                </div>
                <div class="two columns alpha omega menu-ss">
                    ...
                </div>
            </div><!-- .wrapper.main-navigation --> 
        </div><!-- /.sixteen.columns --> 
    </header><!--/header-->
</div><!-- /.main-header -->

IE 8 がレンダリングしているもの:

<div class="wrapper main-header">
    <header class="container"></header>
        <div class="sixteen columns alpha omega">
            <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
            <div class="wrapper main-navigation desktop">
                <nav id="nav" class="six columns alpha omega">
                    ...
                </nav>
                <div class="eight columns alpha omega overlay" style="display: none;">
                    ...
                </div>
                <div class="two columns alpha omega menu-ss">
                    ...
                </div>
            </div><!-- .wrapper.main-navigation --> 
        </div><!-- /.sixteen.columns --> 
    </header><//header><!--/header-->
</div><!-- /.main-header -->

私が試したこと

  • IE 条件付きで html5shiv をロードする<head>
  • Modernizr をロード中<head>

これらの Stackoverflow の質問/回答を見てきました。

これに関するご支援をいただければ幸いです。週末にはこのウェブサイトを完成させたいと思ってい ます。この問題について、過去数時間、頭を壁にぶつけていました。

アップデート

エミュレーションを切り取るために browsershack からいくつかの画像を次に示します。Windows 7 と Windows XP (IE 8 と IE 7) で仮想的にサイトをテストしました。http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1

4

2 に答える 2