Ayuda compatibilidad Internet Explorer

Webster182 dijo:

Hola estoy , estoy utilizando el siguiente codigo para crear posts en wordress , funciona bien en los navegadores firefox, chrome, etc, pero NO funciona en "Internet Explorer", pierde la estructura.



HTML

Código:

<div class="wrapper">
  <h1>Static Layout Example</h1>
  <header>HEADER</header>
  <nav>NAV</nav>
  <section>SECTION</section>
  <footer>FOOTER</footer>
</div>

CSS

Código:

/**************************************
RESPONSIVE LAYOUT CSS
(agencement des blocs)
**************************************/

/*Résolution mobile*/
.wrapper {
   width: 90%;
  /*max-width: 400px;*/
  margin: 0 auto;
}

@media screen and (min-width: 800px) {
/*Résolution médiane*/
  .wrapper {
    /*max-width: 640px;*/
  }
  
  nav, section {
  float: left;
}

  nav {
  width: 20.7812%; /*133px/640px*100=width%*/
  margin-right: 1.5625%; /*10px/640px*100*/
}

  section {
    width: 77.6562%; /*497px/640px*100*/
}

  footer {
    clear:both;
}  
}

@media screen and (min-width: 1000px) {
/*Résolution maximale*/
  .wrapper {
    max-width: 960px;
  }
  
  nav, section {
  float: left;
}

  nav {
  width: 20.8333%;/*200px/960px*100*/
  margin-right: 1.0416%;/*10px/960px*100*/
}

  section {
    width: 78.125%;/*750px/960px*100*/
}

  footer {
    clear:both;
}  
}


/**************************************
CSS de MISE EN PAGE VISUELLE (juste la partie visuelle)
**************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #2980b9;
  color: #FFF;
  font-family: Helvetica;
  text-align: center;
  margin: 0;
}

header,
nav,
section,
footer {
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

header {
  padding: 20px 0;
}

nav, section {
  padding: 200px 0;
}

footer {
  padding: 60px 0;
}

O pueden ver el codigo que intento utilizar aqui A Pen by Captain Anonymous


Busque por la web y recomiendan utilizar esta "solucion"

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<![endif]-->

Efectivamente funciono, pero el sitio web ahora se tarda mucho en cargar a partir de agregar este codigo, ademas al navegar por unas cuantas paginas congela el "internet explorer".



Ahora mi pregunta, existe alguna solucion para poder usar el codigo sin que me vuelva lento/congele el sitio web en internet epxlorer.


Gracias por su ayuda

Click para expandir ...

/**************************************CSS de MISE EN PAGE VISUELLE (juste la partie visuelle)
**************************************/


*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/**************************************
CSS de MISE EN PAGE VISUELLE (juste la partie visuelle)
**************************************/


*, *:before, *:after {
-ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}