0

我有一个页眉和页脚，我正在测试一个我将要开发的网站。页眉和页脚在除 IE 之外的所有浏览器中看起来都很棒。我正在使用支持 IE 的骨架（http://www.getskeleton.com/）网格进行响应，但我找不到问题所在。这是我创建的测试页面的链接：http: //kennyalvarez.com/bs/

 <!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<link rel="stylesheet" href="stylesheets/base.css" />
<link rel="stylesheet" href="stylesheets/skeleton.css" />
<link rel="stylesheet" href="stylesheets/layout.css" />

</head>
<body>
<!-- Primary Page Layout================================================== -->
<div id="head" class="row">
    <header class="container-twelve">
        <p id="" class="six columns alpha"><a href="#">My Site</a></p>
            <ul class="six columns omega">
                <li>
                <button id="searchbtn" name="search">Search</button>
                </li>
                <li>
                <form action="#search" method="post">
                    <input id="search" placeholder="search" type="text" name="search">
                </form>
                </li>
                <li><a href="contact.html">Contact</a></li>
                <li>
                    <a id=login href="#">Login</a>
                    <form id=loginform action="" method="post">
                        <input class="required" id="username" placeholder="Username" type="text" name="username">
                        <input class="required" id="password" placeholder="Password" type="text" name="password">
                        <div id=captcha>
                            <img src="http://placehold.it/100x30" alt="title">
                        </div>
                        <input class="required" id="captchainput" placeholder="Captcha" type="text" name="captchainput">
                        <a href="#">Forgot Login?</a> <a href="#">Register</a>
                        <button id="loginbtn" type="button" name="login">Login</button>
                    </form>
                </li>
                <li><a href="#">Glossary</a></li>
            </ul>
    </header>
</div><!--head-->
<div id=fullpage>
        <nav>
    <div class="container-twelve">

            <a href="#">PAGE</a>
            <a href="#">PAGE</a>
            <a href="#">PAGE</a>
            <a href="#">PAGE</a>
            <a href="#">PAGE & PAGE</a>
            <a href="#">PAGE</a>
            <a href="#">PAGE & PAGE</a>
    </div>
  </nav>

        <ul id="subnav">
        <div class="container-twelve">

            <li><a href="#"> PAGE</a>
                <ul>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>

                </ul>
          </li>
            <li><a href="#"> PAGE</a>
                <ul>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>
                </ul>
          </li>
            <li><a href="#"> PAGE</a>

                <ul>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>
                </ul>
          </li>
            <li><a href="#"> PAGE</a>
                <ul>
                    <li><a href="#">PAGE</a></li>
                </ul>
          </li>
            <li><a href="#"> PAGE</a>
                <ul>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>
                </ul>
            </li>
            <li><a href="#"> PAGE</a>

                <ul>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>
                    <li><a href="#">PAGE</a></li>
                </ul>
          </li>
            <li><a href="#"> PAGE</a>

                <ul>
                    <li><a href="#">PAGE</a></li>
                </ul>
            </li>
        </div>
</ul>
        <div id="content">
            <h1>TEST</h1>

        </div><!--content-->
</div><!--fullpage-->
<div id="foot">
        <footer class="container-twelve">
            <div class="twelve columns">

                <div id="fnav" class="six columns alpha omega">
                    <a href="#">Terms of Use</a>
                    <a href="#">Sitemap</a>
                    <a href="#">Glossary</a>
                    <a href="#">Login</a>
                    <a href="#">Contact Us</a>
                </div>
                <div class="four columns alpha omega">
                    <p><a href="index.html">MY SITE</a></p>
                    <p class="copy">Copyright 2012 &copy; All rights reserved.</p>
                </div>
            </div><!--fourteen-columns-->
        </footer>
    </div><!--foot-->


</body>
</html>
4

2 回答 2

2

Internet Explorer 8 不支持 HTML5 元素，例如header和footer。您将需要用 div 替换这些元素，或者使用这样的 javascript polyfill：http: //www.paulund.co.uk/turn-on-html5-in-ie8-or-lower

于 2013-01-08T22:32:17.103 回答
0

或使用垫片

<!-- HTML5 shim -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
于 2013-06-18T05:46:15.617 回答