Блог

Главная - Вопросы по программированию - Панель навигации плохо отображается в IE6, 7,8, но работает в 9 и всех других браузерах

Панель навигации плохо отображается в IE6, 7,8, но работает в 9 и всех других браузерах

#html #css #internet-explorer

#HTML #css #internet-explorer

Вопрос:

[www.tdeltd.net ][1]

[1]: http://tdeltd.net это мой сайт. Панель навигации не работает во всех версиях IE, кроме 9. Все остальные браузеры отображают сайт правильно. После двух дней поиска я публикую здесь, поскольку не могу найти решение. Я получаю две ошибки при проверке w3c, но они не имеют отношения к тегам заголовка и навигации, в которых происходит сбой. Я вижу в заголовке некоторые javascript, связанные с версиями IE, которые указывают на файлы, которые не существуют. Я не уверен, где их взять. Этот дизайн взят из шаблона. CSS проверен без ошибок, поэтому я не уверен, на чем сосредоточиться, чтобы попытаться исправить проблемы ie6, 7 и 8.

CSS для заголовка:

 /* Header */
    header {
        height:262px;
        position:relative;
    }

/*===== header =====*/
header nav {
    height:50px;
    background:url(../images/nav-tail.gif) repeat-x left top;
    position:absolute;
    right:49px;
    top:201px;
    width:988px;
}
    header nav ul li {
        float:left;
    }
        header nav ul li a {
            font-size:1.273em;
            line-height:1.2em;
            font-weight:bold;
            color:#fff;
            text-decoration:none;
            display:block;
            padding:17px 20px 14px 20px;
        }
        header nav ul li a:hover,
        header nav ul li.current a {
            background-color:#df5b03;
            border-bottom:13px solid #0065a4;
        }

HTML легко просматривается в Интернете с помощью «get source» в одном браузере. Моя проблема в том, что в моем распоряжении только mac, и мне приходится полагаться на отзывы других о поломке. Кто-нибудь может помочь мне найти проблемную область или какие-либо потенциальные идеи относительно того, почему это выглядит идеально на чем угодно, кроме предыдущей версии IE? Большое спасибо заранее!

Дэрил

Еще раз спасибо за помощь всем. Добавление html5shiv в раздел head было определенным исправлением. Переполнение стека — это здорово! Очень рад, что я зарегистрировался и опубликовал. Моя проблема была решена в течение одного часа. Мне потребовалось больше времени для тестирования и подтверждения, чем для получения надежных ответов. Еще раз спасибо!

Ответ №1:

Вам нужно что-то вроде html5shim , что позволит включить теги HTML5 в IE (старше версии 8). Однако требуется JS…

Комментарии:

1. Просто поместите html5shim в заголовок сообщения CSS ссылки. У меня только mac, поэтому я не могу протестировать. Тестовая страница tdeltd.net/index-10.html . Спасибо за ваш ответ. Если у вас есть время, можете ли вы взглянуть, все ли в порядке?

2. @quotaholic здесь это выглядит так же в IE7,8,9 (:

Ответ №2:

Более старые версии IE не поддерживают пользовательские теги, такие как <nav> используемые вами. Используйте <div class="nav"> вместо этого для совместимости с браузером.

Комментарии:

1. Я немного знаком с изменениями css и html. Нужно ли мне что-либо менять в css, чтобы правильно связать это с изменениями, внесенными в html-документ для этого изменения? Спасибо за ваш быстрый ответ!

2. Что ж, найдите ссылки на nav и поместите a . впереди (так .nav ). Это должно сработать.

Ответ №3:

Версии Ie меньше 9 изначально не поддерживают элементы html 5, такие как «nav». Однако исправить это легко. По какой-то странной причуде, если вы создаете элемент с помощью JS (вам даже не нужно вставлять его в DOM), IE теперь будет знать, что он существует, и сможет его стилизовать.

Итак <head> , сделайте это для каждого используемого вами типа элемента html5:

 <!--[if lt IE 9]>
<script>
document.createElement('nav');
//ditto for other html5 elements
</script>
<![endif]-->

Комментарии:

1. Спасибо за быстрый ответ. Я посмотрел в другом шаблоне, с которым я работаю для другого клиента, и нашел html5.js и внутри этого я нашел эту строку: code document.createElement(«nav»); code Как вы думаете, я могу просто вставить это html5.js в папке js и оставьте сценарий if then в head как есть или я долженпридерживаться вашего совета?

2. Круто — если вы нашли это полезным, не возражаете против голосования? Это не только для меня (хотя приятно получать очки), но и помогает другим людям, которые сталкиваются с этим ответом, визуально увидеть, что это было полезно, если у них возникнет подобный вопрос.

3. Я был бы рад, как мне проголосовать? Довольно новое здесь… Спасибо за ответ, однако мой вопрос по html5.js загрузка на сайт находится на рассмотрении. Как вы думаете, это будет жизнеспособным решением?

4. Не беспокойтесь — видите число со стрелками над и под ним в левом верхнем углу каждого ответа? Если вы найдете ответ полезным, нажмите стрелку вверх (даже для вопросов, которые вы не задавали). Если вы задаете вопрос и получаете правильный ответ, установите флажок.

5. Что касается того, что это исправление — поможет рендерингу элементов html5 в IE, но без реального просмотра вашего кода я не могу догадаться, какие другие проблемы могут возникнуть.

Ответ №4:

Элементы HTML 5 недоступны ниже IE 9.

Следующий код исправит это:

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

 <!--[if lt ie 9]>
    <script>
        document.createElement('nav')
    <script>
    <style>
        nav{display:block}
    </style>
<[endif]-->

Помните, что важно стилизовать теги после их создания в IE.

Лучше всего использовать htmlshim, который размещен в Google code и, вероятно, уже подключен к браузеру пользователя:

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

Лучшая производительность — поместить это в заголовок после CSS.

Комментарии:

1. Спасибо за ответ! Я вставил html5shim на скопированную тестовую страницу в tdeltd.net/index-10.html . Поскольку у меня есть только mac, могу ли я попросить кого-нибудь просмотреть этот файл, чтобы узнать, правильно ли он отображается в предварительном IE 9? Еще раз спасибо!

2. заблокирован на брандмауэре моей работы … можете ли вы добавить соответствующий код jsfiddle.net

3. При этом используется стандартный jquery-1.4.2.min.js библиотека. Зацикленный ползунок фактически частично отключен. Стрелки влево и вправо закомментированы, пока мой клиент не получит больше инвентаря. Я не знаю, имеет ли это отношение к проблемам с ie, поскольку сбой происходит в другой области. Спасибо!

4. Извините. Ваша начальная ссылка блокируется как «потенциально опасная», и ваша ссылка на jsfiddle также блокируется. Я уверен, что если вы правильно внедрили html shiv, все готово. Я рекомендую установить виртуальную машину vmware Player с установленной на ней Windows для тестирования.

5. Хороший совет. Спасибо за вашу помощь! Хотел бы я проголосовать. Переполнение стека — огромный ресурс. Все советы указывали в одном направлении и были чрезвычайно полезны для решения моей проблемы. Спасибо всем, кто помог. Как только я получу подтверждение об исправлении, я закрою вопрос.