[SOLUCIONADO] Problemas con Internet Explorer

[alfuco]

Buenos días, les escrivo porqué tengo un gran problema con IE11. El caso es que la web que estoy acabando de maquetar funciona perfectamente en Firefox, Opera, Chrome y Safari pero en Internet Explorer 11 no se aplica absolutamente ningún estilo del css. Bueno si, solamente para cambiar de color el texto. Ni ningún tipo de css de la galería de imágenes, ni del menú, ni los position:fixed, ni los width:x%, etc... NADA. Se que hay algunos estilos css que funcionan en por ej. Chrome y que no lo hacen en IE11 pero dudo mucho que entre ellos esté el atributo position, así que creo que debe ser otro problema. Os pongo unas capturas:


Aquí en Chrome





Aquí en IE11




Gracias por lal ayuda!

[alfuco]

He decidido pasar de IE (en Enero de 2015 solamente lo han usado el 3% de los usuarios) pero no sin antes avisar a los navegantes de mi web. Por eso, había pensado incluir un script que haga lo siguiente:

Que detecte el navegador usado, y si es IE, que todo el contenido de la página desaparezca y aparezca en la pantalla un mensaje tipo: Lo sentimos, esta web no está disponible en IE; por favor, use otro navegador.

¿Alguien sabe como hacer ese script?

[martinmiranda90]

Hola. Aqui ya entrarian otros factores ajenos a la maquetación para determinar si es necesario o no tratar de arreglar eso. Por ejemplo si estamos hablando de una web destinada a un pública mayoritariamente joven, que (en teoría) estamos más metidos en el tema de las nuevas tecnologías, con el script avisando no tendría porque ir mal. Si estamos hablando de una web de abogados, gestores o sectores de este estilo donde el tráfico de gente más adulta es bastante frecuente Internet Explorer es importante, porque aunque no lo parezca, sigue siendo muy usado.

Saludos!

[GemliosG]

no se si ya lo hiciste pero no es tan difícil. solamente delante de cada estilo CSS pon -moz- -webkit- y todo lo que te salga en el compilador al poner -, yo lo hago y me funciona perfecto, lo comprobé porque cree un sitio y a la hora de publicarlo me doy cuenta que varios de los usuarios del mismo utilizan IE. Espero que te sea de utilidad.

PS

Esto es un ejemplo con un box-shadows

boxs-hadows: blue 1px 1px 1px 1px;
-moz-boxs-hadows: blue 1px 1px 1px 1px;
-webkit-boxs-hadows: blue 1px 1px 1px 1px;
-o-boxs-hadows: blue 1px 1px 1px 1px;
-ms-boxs-hadows: blue 1px 1px 1px 1px;

[alfuco]

Iniciado por martinmiranda90

Hola. Aqui ya entrarian otros factores ajenos a la maquetación para determinar si es necesario o no tratar de arreglar eso. Por ejemplo si estamos hablando de una web destinada a un pública mayoritariamente joven, que (en teoría) estamos más metidos en el tema de las nuevas tecnologías, con el script avisando no tendría porque ir mal. Si estamos hablando de una web de abogados, gestores o sectores de este estilo donde el tráfico de gente más adulta es bastante frecuente Internet Explorer es importante, porque aunque no lo parezca, sigue siendo muy usado.

Saludos!

Tienes razón, no había pensado en eso.

Iniciado por GemliosG

no se si ya lo hiciste pero no es tan difícil. solamente delante de cada estilo CSS pon -moz- -webkit- y todo lo que te salga en el compilador al poner -, yo lo hago y me funciona perfecto, lo comprobé porque cree un sitio y a la hora de publicarlo me doy cuenta que varios de los usuarios del mismo utilizan IE. Espero que te sea de utilidad.

PS

Esto es un ejemplo con un box-shadows

boxs-hadows: blue 1px 1px 1px 1px;
-moz-boxs-hadows: blue 1px 1px 1px 1px;
-webkit-boxs-hadows: blue 1px 1px 1px 1px;
-o-boxs-hadows: blue 1px 1px 1px 1px;
-ms-boxs-hadows: blue 1px 1px 1px 1px;

Gracias por la ayuda, lo acabo de intentar poniendo el prefijo -ms- hasta en los "top" pero ni así, IE se resiste. Ahora pondré el código por si acaso a alguien se le ocurre qué puede estar fallando

[alfuco]

Pongo como ejemplo la barra de inicio ya que toda la página principal no me cabe:

Código:

<section id="barra_inicio">
<ul>

<li><a class="negro">Acerca de Siens</a>
<ul>
<li><a href="nuestra_firma.html">Nuestra firma</a></li> <li><a href="nuestra_vision.html">Nuestra visión</a></li> 
</ul></li>  
  
<li><a class="negro">Soluciones</a>
<ul>
<li><a href="gestion_de_cuentas.html">Gestión de cuentas</a></li> <li><a href="gestion_terminologica.html">Gestión terminológica</a></li> <li><a href="consultoria_multilingue.html">Consultoría multilingüe</a></li><li><a href="gestion_de_la_calidad_linguistica.html">Gestión de calidad lingüística</a></li>
</ul></li>         

<li><a class="negro">Servicios</a>
<ul>
<li><a href="traduccion.html">Traducción</a></li><li><a href="localizacion.html">Localización</a></li><li><a href="gestion_de_proyectos.html">Gestión de proyectos</a></li><li><a href="validacion_linguistica.html">Validación lingüística</a></li><li><a href="ingenieria_linguistica.html">Ingeniería lingüística</a></li><li><a href="autoedicion.html">Autoedición</a></li><li><a href="postediting.html">Post-editing &amp; Big data</a></li><li><a href="interpretacion.html">Interpretación</a></li>
</ul>
</li> 

<li><a class="negro" href="especializacion.html">Especialización</a>
<ul>
<li><a href="siens_med.html">SIENS </a><a href="siens_med.html" class="blues">Med</a></li><li><a href="siens_engitech.html">SIENS </a><a href="siens_engitech.html" class="oranges">EngiTech</a></li><li><a href="siens_energy.html">SIENS</a> <a href="siens_energy.html" class="greens">Energy</a></li><li><a href="siens_legecon.html">SIENS </a><a href="siens_legecon.html" class="browns">LegEcon</a></li>
</ul></li>

<li><a href="tecnologia.html" class="negro">Tecnología</a>
<ul>
<li><a href="herramientas_terminologicas.html">Herramientas terminológicas</a></li> <li><a href="soluciones_linguisticas.html">Soluciones lingüísticas</a></li> 
</ul>
</li>

<li><a href="contacto.html">Contacto</a>
</li>  

<li><a href="careers.html">Careers</a>
</li> 

</ul>   
</section>

Código:

#barra_inicio {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color:#999;
  text-align: center;
  top:8%;
  right:1.5%;
  position:fixed;
  z-index:99999999;
  text-decoration:none;
}

#barra_inicio ul {
  text-align: left;
  display: inline;
  color:#999;
  padding: 1.5rem 0.4rem 1.5rem 0;
  list-style: none;
  -webkit-box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.15);
  	text-decoration:none;
}

#barra_inicio ul li {
  font-size:0.9rem;
  color:#999;
  display: inline-block;
  margin-right: 0%;
  position: relative;
  padding: 0.95rem 1.25rem;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-decoration:none;
}

#barra_inicio ul li a{
	text-decoration: none;
}

#barra_inicio ul li:hover {
  border-bottom: 0.2rem solid #475678;
  text-decoration:none;
}

#barra_inicio ul li ul {
  padding: 0;
  position: absolute;
  top: 3rem;
  left: 0rem;
  width: 10rem;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  	text-decoration:none;
}

#barra_inicio ul li ul li { 
  display: block; 
  color: #475678;
  text-decoration:none;
}

#barra_inicio ul li ul li:hover { 
  background: #FFF;
  border: 0rem;
  color:#475678;
  text-decoration:none;
}

#barra_inicio ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  	text-decoration:none;
}

[alfuco]

No se cómo ni por qué pero he conseguido que se muestre exactamente igual que en los demás navegadores. Por si a alguien le sirve en un futuro, he usado esta sentencia:

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