Не получается получить правильный вывод в IE8, пока в Google Chrome все нормально?

Question

Не получается получить правильный вывод в IE8, пока в Google Chrome все нормально?

0

<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;
        }

этот псевдокласс nav li: last-child: после неработающего из-за этого я получаю разделитель моего последнего меню. так как исправить это.

Roshni 30 нояб. 2013, в 16:11

Источник

0

Любой CSS, чтобы пойти с этим HTML?
ohiodoug 30 нояб. 2013, в 14:51

Теги:

html

internet-explorer-8

2 ответа

Ещё вопросы

ohiodoug · Answer 1 · 2013-11-30T13-06-00.000Z

Вы используете элементы HTML5 (заголовок и навигатор) в своей разметке. IE8 и ниже не поддерживают все теги html5. Прочитайте следующую ссылку, чтобы вы ее поняли, и добавьте следующие фс на свой сайт, и она должна начать рендеринг:

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

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

Удачи!

спасибо, что работает сейчас. и еще одна проблема, я использую псевдо-класс в CSS для делителя, он не работает.
Опубликуйте свой CSS и то, что вы пытаетесь сделать.
привет, сэр, я новичок в учетной записи stackoverflow, вы расскажете, как добавить код CSS в моем вопросе?
Отредактируйте свой вопрос и вставьте его так же, как вы сделали свой HTML.

Julien F. · Answer 2 · 2013-11-30T12-07-00.000Z

Элементы HTML5 не поддерживаются в версии IE ниже IE9.

Вы можете решить эту проблему, включив эти строки в <head>

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