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

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

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

Update

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

Примечание. Где у меня 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 как тот синий.

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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