Question

<header>
    <H2>Logo Here</H2>
    <form>
        Search:
        <input type="text" name="search" class="search_bt" />
    </form>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Carrer</a></li>
            <li><a href="#">Home Loan</a></li>
            <li><a href="#">Education Loan</a></li>
            <li><a href="#">All Loans</a></li>
        </ul>
    </nav>
    <div style="clear:both"></div>
</header>

这是我的HTML代码我在IE8中没有得到正确的输出。那有什么问题呢？

this is my css
            body{
                margin:0 auto;
                width:1072px;
        }
        header,nav{
                 display:block
        }

        header{
                background:url(file:///C|/Users/Administrator/Desktop/banking/img/header_bg.jpg) repeat-x;

        }
        header h2 {
                float: left;
                margin: 0px;
                font-family: sans-serif;
                font-size: 48px;
                line-height: 48px;
                margin-top: 48px;
                color: #c40b51;
        }
        header form{
                float:right;
                margin-top:30px;
        }
        .search_bt{

                border-radius: 8px;
                height: 23px;
                background:url(file:///C|/Users/Administrator/Desktop/banking/img/search_bt.png) 100% 48% no-repeat;
                background-color: #f1edef;

        }
        nav{
                float:right;
                margin: 100px -200px;
                margin-bottom: 3px;

        }
        nav a{
                color:#666;
                text-decoration:none;
        }
        nav a:hover{

                background-color:#c40b51;
                color:white;
                border-radius:7px;
                padding:2px 6px;
                margin:0px -6px;
        }
        nav ul{
                margin:0px;
                padding:0px;
        }
        nav li{
                display:inline;
                list-style:none;
        }
        nav li:after{
                content:'|';
                margin-left: 10px;
                margin-right: 10px;
        }
        nav li:last-child:after{
                content:'';
                margin-left: -8px;
        }

这个伪类导航li：last-child：因为我没有工作，因为我得到了我最后一个菜单的分隔符。所以如何解决它。

Answer 1

您在标记中使用HTML5元素（标题和导航）。 IE8及更低版本不支持所有html5标签。阅读以下链接，以便您了解它，并将以下fs添加到您的网站，它应该开始渲染：

https://code.google.com/p/html5shiv/

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

祝你好运！

Answer 2

低于IE9的IE版本不支持HTML5元素。

您可以通过在<head>

中加入这些行来解决此问题

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

在谷歌浏览器中可以正常使用IE8中没有正确的输出？

2 个答案: