1. дома
  2. Вопрос и ответ
  3. Как исправить twitter-bootstrap на IE?

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

2012-06-25 2 views
39

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

screenshot

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

После тега тела:

<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="http://minecraft.net">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>

источник

2012-06-25 Onni Bucht

+1

Вы пробовали руководство в этом вопросе? http://stackoverflow.com/questions/9780464/twitter-bootstrap-nav-bar-issues-in-internet-explorer –

+1

Посмотрите на ответ Facuu7. Убедитесь, что первая строка вашей html-страницы – Gazzini

+0

@OnniBucht, пожалуйста, примите [ответ ниже] (http://stackoverflow.com/a/12394509/1983495), похоже, то, что вы искали. –

ответ

65

Вам нужно положить <!DOCTYPE HTML> в первой строке HTML.

источник

2012-09-12 18:53:07

+0

Это работает. У меня был комментарий html как первая строка, а bootstrap был сломан. Я удалил его, и теперь он отлично работает. Благодаря! – Gazzini

+2

Да, я могу подтвердить, добавив .Я потерял его, и после добавления DOCTYPE он работал нормально. – noobcode

+1

@markus, потому что у меня была та же проблема –

5

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

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

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

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

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

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

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

-tessi

источник

2013-02-13 01:52:02 tessi

+0

Это было лучшее для меня. Благодарю. – johnny

+0

Это не ответ. –

47

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

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

краткое объяснение о том, что он есть и как это работает, находится на этом link.

источник

2013-06-05 14:15:40

+0

Это сделало трюк для меня. Когда я отслеживал вещи с помощью инструментов для разработчиков, я заметил, что он сообщал о запуске в режиме совместимости при развертывании в «интрасети», но не на моей машине разработки. –

+2

Это сработало для меня, но теперь меню сломано с помощью Bootstrap 3. Это по крайней мере на один шаг ближе ( не работал для меня.) – Chris

+0

спасибо большое ... это помогло –

1

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

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

источник

2013-10-18 14:08:31 Jason

2

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

Это Bootstrap правило Navbar стиль, установить свойство поплавка для элементов NavBar:

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

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

Как говорит здесь: Internet Explorer's CSS rules limits, лист может содержать до 4095 строк.

источник

2013-10-23 14:57:46

18

Просто для полноты - стоит отметить, что с Bootstrap 3, as per the docs, убедитесь, что на вашей странице представлена ​​следующая структура. Он решил проблемы с 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>

источник

2014-06-25 23:59:00 SteveChapman

+0

Спасибо много..это помогло –

6

Нужно включить эти два сценария для 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>

источник

2014-12-21 04:54:17

+0

Bhai Kadak! Оно работает!! Большой! – Piyush

+0

Это немного помогло мне .... но основная часть о классе nav не решена ... –

+0

Я знаю, что это только для более старых, чем IE9, поэтому для IE8 и IE7 –

3

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

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

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

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

Реагировать Js и html5 подкладку (если с помощью этого) для 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>

источник

2015-03-26 05:14:09 aamarks

+0

здесь вы последний ответ и послезавтра, ваш решение помогло мне. Не уверен, когда этот флажок был снят или если я сделал это или просто дрянной IE, но это все. Большое спасибо!! –

+0

То же самое. Я включил TLS 1 и сказал «ОК» к предупреждению о сертификате безопасности IE 9. Раньше все выпадающие списки Bootstrap не реагировали. Это заставило их работать как в IE8, так и в IE9. –

2

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

verify these settings

источник

2015-06-11 23:11:52 chineerat

3

Если вы находитесь в локальной сети и настройки устанавливаются в режиме совместимости, то соответствующее DOCTYPEs и respond.js недостаточно.

Для получения дополнительной информации обратитесь к этой ссылке: Force IE8 or IE9 document mode to standards и см. Ответ Ральфа Бэкона.

Было бы так же, как это:

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

источник

2015-07-14 07:12:08

0

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

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

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

источник

2015-08-28 04:42:13

Смежные вопросы

 Смежные вопросы