Как исправить twitter-bootstrap на IE?

Навигационная панель, похоже, не работает должным образом в IE. Вот скриншот об этом в IE.

Я просматривал множество загрузочных тем на stackoverflow.com, но "помощь", которую они дают людям, не работает для меня.

После тега body:

<div class="container">
    <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="?id=home">OnniServer.tk</a>
                    <div class="nav-collapse">
                    <ul class="nav">
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == home)) { echo "class='active'"; } ?>><a href="?id=home">Home</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { echo "class='active'"; } ?>><a href="?id=donate">Donate</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == about)) { echo "class='active'"; } ?>><a href="?id=about">About</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { echo "class='active'"; } ?>><a href="?id=staff">Staff</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { echo "class='active'"; } ?>><a href="?id=vote">Vote</a></li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Play now: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="minecraft">In browser</a></li>
                                <li><a href="#" onclick="location.href='http://minecraft.net'; return false;">Buy it now</a></li>
                                <li><a href="#">No link for crack</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Perms for: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="?id=citizen">Citizen(s)</a></li>
                                <li><a href="?id=vip">VIP(s)</a></li>
                                <li><a href="?id=vipplus">VIP+(s)</a></li>
                                <li><a href="?id=modjr">Jr. Moderator(s)</a></li>
                                <li><a href="?id=mod">Moderator(s)</a></li>
                                <li><a href="?id=admin">Admin(s)</a></li>
                                <li><a href="?id=owner">Owner</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Mail to: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="mailto:[email protected]">Onni (server Owner)</a></li>
                            </ul>
                    </li>
                    <script>
                        $('.dropdown-toggle').dropdown()
                    </script>
                    </ul>
                    </div>
                </div>
            </div>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="hero-unit">
        <style "text/css">
        </style>
        <?php
        if (((isset($_GET['id'])) &&($_GET['id'] == home)) || (!isset($_GET['id']))) { include('home.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { include('donate.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == about)) { include('about.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { include('staff.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { include('vote.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == citizen)) { include('permissions/citizen.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vip)) { include('permissions/vip.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vipplus)) { include('permissions/vipplus.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == modjr)) { include('permissions/modjr.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == mod)) { include('permissions/mod.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == admin)) { include('permissions/admin.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == owner)) { include('permissions/owner.html'); };
        ?>
    </div>
</div>

Ответ 1

Вам нужно поместить <!DOCTYPE HTML> в первую строку вашего html.

Ответ 2

Вы можете добавить метатег:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Краткое описание того, что это такое и как оно работает, найдено на этой ссылке.

Ответ 3

Просто для полноты - стоит отметить, что с Bootstrap 3, в соответствии с документами, убедитесь, что на вашей странице представлена следующая структура. Он решил проблемы, которые у меня были с IE9 и v3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- content -->
</body>
</html>

Ответ 4

Необходимо включить эти два сценария для IE

<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

Ответ 5

Не уверен, что он исправит вашу конкретную проблему, но стоит поделить все равно.

У меня были проблемы с ремешком для twitter в IE. Нет закругленных углов. Меню навигации не рушится. Пространство не находится в правильном месте, даже некоторые изображения не отображаются.

Странно, сайт работает нормально в IE при запуске через отладчик визуальной студии, его когда-то развертывается на сервере, что проблема возникает.

Попробуйте использовать инструменты разработчика IE (F12 - это сочетание клавиш) Проверьте режим браузера и режим документа. (вверху вдоль строки меню)

Проблема возникла для меня, поскольку документ был IE7, а браузер - совместимость с IE10. Я добавил http-заголовок в IIS: имя X-UA-Compatible Стоимость IE = EmulateIE9

Теперь страница загружается как документ - стандарты IE9, совместимость браузера IE10 и все предыдущие проблемы.

Надеюсь, что это поможет.

-tessi

Ответ 6

У меня была такая же проблема, и никто из других ответов не работал. Моя проблема была странной, когда IE9 не смог подключиться к каким-либо http s сайтам, поэтому, поскольку я использовал онлайн-загрузочные файлы maxcdn, например,

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

ни один из этих css и js не применялся. Перейдя на вкладку "Дополнительно" параметров "Internet Explorer", я подтвердил, что проверка "Use TLS 1.0" не вызвала проблему с сайтами и файлами https, и как только я проверил, что моя загрузочная страница была отформатирована, как ожидалось.

Как отмечали другие, используйте надлежащий doctype ниже (возможно, действительный html4 doctype будет работать, но если вы начинаете заново, можете использовать html5.)

Ответ js и html5 shim (если используется) предназначены для IE8. IE9 не нуждается в этом. В приведенном ниже коде используется стандартный метод таргетинга ie8 и ниже.

- Art

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- content -->
</body>
</html>

Ответ 7

Если вы находитесь в пределах интрасети, и настройки установлены в режим совместимости, то правильных дотипов и response.js недостаточно.

Для получения дополнительной информации см. эту ссылку: Принудительный режим документа IE8 или IE9 и см. ответ Ральфа Бэкона.

Он будет таким же:

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Ответ 8

Internet Explorer имеет максимальное количество строк кода для распознавания стилей.

Это правило стиля навигационного стиля Bootstrap, устанавливающее свойство float для элементов навигации:

.navbar-nav > li {
    float: left;
}

Это правило в Bootstrap 3 (возможно, в ранних версиях тоже) находится в строке 5247.

Как сказано здесь: ограничения CSS-правил Internet Explorer, лист может содержать до 4095 строк.

Ответ 9

У меня была эта проблема в последнее время. Я изменил эти настройки. И это сработало для меня.

Ответ 10

У меня были схожие проблемы. Я поместил следующую строку кода в начало моего файла макета, и все кажется прекрасным.

<meta http-equiv="X-UA-Compatible" content="IE=9">

Ответ 11

Если вы используете отзывчивый макет, попробуйте включить этот js в свой код: https://github.com/scottjehl/Respond

Ответ 12

У меня была аналогичная проблема. В моем случае, глядя на CSS, я нашел position: initial.

После некоторых исследований я обнаружил, что мобильный браузер IE не поддерживает его.

Я просто положил position: relative, и все работало нормально.