tag - html5 progress bar
HTML5 y CSS3 para IE7 y IE8 (6)
Heredé una aplicación web donde el front-end usa nuevas etiquetas HTML5 (encabezado, navegación, etiquetas de sección) y nuevos atributos de estilo CSS3 (bordes redondeados). El sitio web se ve increíble en Google Chrome y Safari.
Sin embargo, el cliente ahora se queja de que el sitio web está dañado para IE7 e IE8. Todo está fuera de alineación y la mayoría de los estilos no se renderizan.
¿Cuál es la forma más fácil de hacer que este sitio web funcione en IE7 e IE8? ¿Tengo que: a) Aplicar algunos trucos para que los navegadores IE acepten las nuevas funciones HTML5 y CSS3? b) ¿Una reescritura completa de la parte frontal?
Independientemente de las nuevas etiquetas semánticas, si pretende producir el efecto CSS3 en IE7 / 8, puede utilizar las clases de gráficos asp.Net como alternativa para IE7 / 8. Algunos de los efectos que pueden crearse usando gráficos .net son:
Radio de borde, degradado lineal, degradado radial, cuadro-sombra.
Puede crear estos efectos en la página asp.net usando clases de gráficos y renderizar esa página como una imagen de fondo de cualquier elemento HTML. es decir
<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1¶m2=value2)"></div>
O
<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1¶m2=value2" />
donde los valores de los parámetros se ingresan en términos de la salida requerida para crear el efecto. Es decir, altura, ancho, color, etc.
Para HTML5, recomiendo HTML5 Shim de Remy Sharp , aunque para ver el efecto, los usuarios de IE deberán tener JavaScript habilitado. Básicamente, explota un error en IE6 / 7/8 que permite que los elementos HTML5 se reconozcan después de que se hayan creado por primera vez en JavaScript mediante la función document.createElement .
Para su CSS, hay algunos hacks diferentes como el PIE de CSS3 que utilizan la propiedad "comportamiento" (que es exclusiva de IE) para simular los efectos de CSS3. Sin embargo, personalmente me he abstenido de estos, ya que, según mi experiencia, se rompen muy fácilmente y terminan siendo más problemáticos de lo que valen. En cambio, tiendo a escribir mi CSS para que se degrade con gracia en IE, para que los botones redondeados se vean cuadrados, pero aún se vean bien.
Para agregar a Karl y Alistair, encontré un problema con CSS3Pie en mi sitio. Utilicé su código CSS de hace cuatro meses y los gradientes CSS3 estaban bloqueando los campos <input type="text"/> que no se muestren en IE7 o IE8. Solo cuando volví a visitar su sitio y vi su nuevo código CSS funcionó.
La lección es siempre revisar los sitios web de complementos para el código más reciente
Puede probar css3pie http://css3pie.com/ que ayudaría con los problemas de css3.
modernizr http://modernizr.com/ será una buena opción.
Prueba este hermoso script (.js) :)
Y para esquinas redondeadas utilizo otro script (.htc)
usa el 1er
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
usa el segundo como:
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);
Feliz construcción de edificios :)
El enlace original ya no está activo y HTML5shiv se ha movido.
Ahora disponible en GitHub