18 votos

Twitter Bootstrap - nav bar problemas en internet explorer

Estoy usando Twitter Bootstrap en mi aplicación rails. Mi navbar se ve perfecto en Firefox / Chrome / Safari (probado chrome, tanto en Mac y PC). En Internet Explorer, se ve feo! Mal los colores y todo.

Cualquier ayuda que puede proporcionar sería apreciada. Me pueden enviar cualquier código que podría ayudar.

Actualización

Aquí está todo el CSS donde puedo invalidar cualquier cosa, desde bootstrap (traído a mi aplicación a través de sass-gema rails). Esperemos que nos empuja en la dirección correcta.

Nota: Donde he color:#F8F8F8; a continuación, solía tener #333. Esto es sólo una iteración de mí tratando de solucionarlo. Incluso he intentado cambiar el color de fondo a #333334 como creo que mi precompilador estaba cambiando #333333 a #333 (no lo sé)

/*  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;
}

También he probado el siguiente (en un intento de invalidar explícitamente nada que ver con los gradientes de 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);
}

Otra actualización

Trasteo con el internet explorer developer tools me lleva a creer que el problema es este:

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

¿Qué es esto? Lo necesito? (¿Por qué no utilizar el mismo gradientes como firefox/chrome?) Se trata de Bootstrap... puedo tratar de reemplazar los colores de allí porque por la razón que sea es decir, es la interpretación de FF333333 como el azul oscuro.

22voto

Brandon Puntos 1177

Resulta que yo era capaz de arreglar esto por montar el filtro por defecto en el código generado por Bootstrap. Muchas gracias por Nathan y Andrés! Para anular el código que había publicado anteriormente, he añadido la siguiente :

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

Espero que esto le ahorra un poco de dolor para alguien....

14voto

IAmFledge Puntos 388

Andrés Ilich comentó en el OP:

"Intente filter:none en el navbar (totalmente olvidé de eso), es decir, utiliza un aparte de la sintaxis para generar gradientes. background-image aún no apoyado por IE9 para crear degradados."

Después de desarrollar muy dolorosa frente de cachetes en numerosas ocasiones en el escritorio, esto es exactamente lo que se ha solucionado el problema para mí. Gracias Andrés.

1voto

Nathan Puntos 4662

Esto me pasó a mí también. Pero me enteré de que en los degradados CSS, es decir, (incluso 9) no parece estar a salvo sólo 3 caracteres códigos HEXADECIMALES. Por lo que necesita para cambiar los códigos hex a 3 caracteres en cambio si no están ya (como #CCC a #CCCCCC) para que funcione correctamente en IE (sólo para la IE gradiente de CSS, no todos ellos).

Si usted podría publicar tu CSS pude ver si hay otros problemas. Pero, mi problema era que el #CCC fue interpretado como el azul oscuro en el IE.

1voto

Andres Ilich Puntos 41712

Por lo que puedo decir que usted está usando un color sólido de fondo en la barra de navegación de la parte superior, así que usted sólo añadir un color de fondo pero no la eliminación de la imagen de fondo, así que intenta restablecer que también así:

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

0voto

William Puntos 67

Esto es mucho más simple:

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

Aviso que este es un directo reemplazo de twitter bootstrap CSS. Al parecer, Internet Explorer necesita el 'filtro' para ser eliminado. Eso es todo!

Oh, sí, yo también tuve que agregar que para el "activo" de la lista desplegable (debido a que estoy trabajando en un sitio de WordPress) como este:

.dropdown-menu>li.active>a
{
   filter: none;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: