Twitter Bootstrap - проблемы с навигационной панелью в Internet Explorer - PullRequest
Новая
       12

Twitter Bootstrap - проблемы с навигационной панелью в Internet Explorer

19 голосов
/ 20 марта 2012

Я использую Twitter Bootstrap в своем приложении rails. Моя навигационная панель отлично выглядит в Firefox / Chrome / Safari (проверенный Chrome на Mac и ПК). В Internet Explorer это выглядит безобразно ! Неправильные цвета и все.

Буду признателен за любую помощь, которую вы можете предоставить. Я могу опубликовать любой код, который поможет.

Обновление

Вот весь CSS, где я перезаписываю что-либо из начальной загрузки (введено в мое приложение через гем sass-rails). Надеюсь, это подтолкнет нас в правильном направлении.

Примечание: там, где у меня есть color:#F8F8F8; ниже, у меня был #333. Это всего лишь одна итерация того, что я пытался это исправить. Я даже пытался изменить цвет фона на #333334, так как я думаю, что мой прекомпилятор менял #333333 на #333 (хотя точно не знаю) 

/*  Styling */

.navbar, .navbar-inner, .navbar-fixed-top, .container, #tabs .nav {
  border:none;
  background-image:none;
}

.navbar {

  font-size:14px;
  text-shadow:none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  .nav {
    float:right;
  }

  .brand {
    margin-left:30px;
    color:#333334;
    font-family: Georgia, serif
  }

  .navbar-inner {
      background-color: #F8F8F8;
      border-bottom-color: #E0E0E0;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      color: #333334;
  }


}

.navbar .nav > li > a {
  text-shadow:none;
  color:#555555;
  background-color: transparent;
  cursor:pointer;

  &:hover {
    color:#E6E6E6;
  }
}

.navbar .nav .active > a, .navbar .nav .active > a:hover {
  background-color: transparent;
  color: #555555;
}

.navbar .nav .inactive > a:hover {
  color:#999999;
}

.navbar .nav > li > a.sign-in {
  color:#555555;
  padding-top:4px;
  padding-bottom:4px;
  margin-top:5px;
  margin-left:30px;
}

.navbar .nav > li > a.sign-in:hover {

  background-position: 0 0px;

}

.navbar .nav > li > a.active-button {
  background-color: #E6E6E6;
  background-image: none;
  border:1px solid #cccccc;
  border-radius:4px;
  box-shadow: none;
  cursor: pointer;
  opacity: 0.6499999761581421;
  outline-color: #555555;
  outline-style: none;
  outline-width: 0px;
  text-decoration: none;
  text-shadow: none;
  padding-top:4px;
  padding-bottom:4px;
  margin-top:5px;
}

Я также попробовал следующее (в попытке явно переопределить все, что связано с градиентами из Bootstrap): 

body {
  color:#333334;
}

.navbar-inner {
  background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
  background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}

.btn-navbar {
  background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
  background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}

Еще одно обновление

Работа с инструментами разработчика Internet Explorer заставляет меня поверить, что проблема заключается в следующем: 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF333333',endColorstr='#F2222222', GradientType=0)

Что это? Мне это нужно? (Почему он не использует те же градиенты, что и Firefox / Chrome?) Это происходит из Bootstrap ... Я могу попытаться переопределить там цвета, потому что по какой-то причине IE интерпретирует FF333333 как темно-синий.

Ответы [ 6 ]

22 голосов
/ 22 марта 2012

Оказалось, что я смог это исправить, переписав код фильтра по умолчанию, сгенерированный Bootstrap. Большое спасибо за Натана и Андреса! Чтобы переопределить код, который я разместил выше, я добавил следующее: 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F8F8F8', GradientType=0)

Надеюсь, это спасет кого-то от боли ...

14 голосов
/ 26 марта 2012

Андрес Ильич прокомментировал ОП:

"Попробуйте filter:none на панели навигации (об этом совсем забыли), IE использует отдельный синтаксис для генерации градиентов. background-image все еще нет поддерживается IE9 для создания градиентов. "

После того, как у меня сильно болел лоб, много раз ударив его по столу, это как раз и решило проблему для меня. Спасибо Андрес.

1 голос
/ 21 марта 2012

Из того, что я могу сказать, вы используете сплошной цвет для фона в верхней панели навигации, поэтому вы только добавляете цвет фона, но не удаляете также фоновое изображение, поэтому попробуйте сбросить его, какитак: 

  .navbar-inner {
      background-color: #F8F8F8;
      background-image:none;
      border-bottom-color: #E0E0E0;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      color: #333334;
  }
1 голос
/ 20 марта 2012

Это случилось со мной тоже. Но я обнаружил, что в CSS-градиентах IE (даже 9), по-видимому, не представляет собой ничего, кроме трехсимвольных HEX-кодов. Поэтому вам нужно изменить шестнадцатеричные коды вместо трехзначных, если они еще не созданы (например, от #CCC до #CCCCCC), чтобы они работали правильно в IE (только для CSS-градиента IE, но не для всех из них). ).

Если бы вы могли опубликовать свой CSS, я бы увидел, есть ли другие проблемы. Но моя проблема заключалась в том, что #CCC интерпретировалось как темно-синий в IE.

0 голосов
/ 27 августа 2015

Internet Explorer неплохо разбирается, и обычно я использую отдельную таблицу стилей, чтобы исправить исследование, не испортив остальную часть моего сайта. Вставьте эту строку кода на ваших веб-страницах: 

<!--[if IE]>
  <link rel="stylesheet" href="styles/fix_internet_explore.css">
<![endif]-->

и измените CSS, чтобы он лучше выглядел в проводнике, и хорошая сторона в том, что другие браузеры игнорируют эту таблицу стилей.

0 голосов
/ 08 мая 2013

Это намного проще: 

.dropdown-menu>li>a:hover, 
.dropdown-menu>li>a:focus, 
.dropdown-submenu:hover>a, 
.dropdown-submenu:focus>a,
.dropdown-menu>li.active>a
{
   filter: none;
}
...