Use una hoja de estilo de reinicio global como :
http://meyerweb.com/eric/thought…
http://www.blueprintcss.org/tests/
O elija una hoja de estilo de normalización (que hará que los elementos sean más coherentes entre navegadores, al tiempo que conserva un estilo sensato):
https://github.com/necolas/norma…
- ¿Podría Oracle evitar que usemos el nombre Javascript?
- ¿Hay algún enlace al sitio web que, si lo envío a mis amigos, me envíe de vuelta su wifi Passord, algún script HTML / PHP?
- ¿Música o desarrollo web?
- ¿Es cierto que los desarrolladores de backend tienen mejores habilidades técnicas que los desarrolladores web o móviles frontend?
- ¿Vale la pena Auth0?
Normalize.css es un archivo CSS personalizable que hace que los navegadores procesen todos los elementos de manera más consistente y en línea con los estándares modernos. Investigamos las diferencias entre los estilos de navegador predeterminados para orientar con precisión solo los estilos que necesitan normalizarse.
La plantilla de HTML5 utiliza este normalize.css. HTML5 Boilerplate también es un gran marco para ayudarlo a diseñar html entre navegadores.
Use un DOCTYPE válido
Asegúrese de que su documento fuerce los modos de representación correctos en los navegadores. Esto evitará representaciones extravagantes y debería hacer que la representación sea más consistente (estricta, y todos los navegadores usan el mismo modelo de caja).
Use un sistema de cuadrícula o estandarice el suyo
Con un sistema de cuadrícula, como 960.gs, es poco probable que los diseños fallen. Estos marcos han sido probados a fondo. Si estandariza su propio sistema de cuadrícula, puede solucionar los errores más comunes.
Diseño para navegador cruzado
La “base” de su diseño debería funcionar en navegadores menos modernos. Si tiene que degradar con gracia su diseño para que funcione en IE6, arreglando o pirateando la transparencia, las esquinas redondeadas, el ancho mínimo-máximo, su diseño se verá afectado. Si comienza con un diseño sólido “base” que funciona en IE6, siempre puede mejorar para navegadores modernos. Al final, no hay forma de que transfieras la experiencia completa de un control deslizante de contenido CSS3 a IE6.
No digo que siempre deba optar por diseños aburridos de ancho fijo, pero es su apuesta más segura, cuando se requiere un navegador cruzado.
No use en exceso CSS o CSS3 específicos del proveedor
Genial, le diste todo a las esquinas redondeadas, contenido editable, opacidad, gradientes CSS y sombra de texto … ¿y ahora qué? Te enfrentas a un dilema: degrada la experiencia para navegadores más antiguos o piratea / recrea la experiencia para navegadores más antiguos. Si se ve obligado a agregar imágenes de degradado para admitir IE8, ¿por qué incluso usar gradientes CSS3 en primer lugar?
No cometa errores básicos y escriba un marcado sólido.
Si su marcado es de mala calidad, los navegadores no pueden evitarlo si se equivocan. Para el navegador cruzado, necesita un conocimiento sólido sobre el CSS y debe usarlo “correctamente”: asegúrese de que todos los elementos estén borrados y que todos los cuadros tengan el tamaño de su
hijos, asegúrese de que su marcado valide, etc. etc. Un consejo obvio, pero vale la pena incluir: algunos desarrolladores sienten que todos los errores son culpa de IE, cuando seguramente pueden mejorar su propio código.
Edita diseños en el navegador
Abra algunos navegadores (pruebo con la máquina virtual Firefox, Chrome, Opera e IE6) y diseñe en su navegador. Unos pocos F5 tempranos lo harán atrapar muchos errores de visualización, antes de establecer su marcado en piedra. La corrección de estos errores luego varía de muy molesto a imposible. Usar el papel cuadriculado como fondo del cuerpo puede ayudarlo a alinear las cosas en los navegadores. Para más información sobre el uso de cuadrículas como fondo, lea Khoi Vinh o Mark Boulton. Para obtener más información sobre el diseño en el navegador, lea las publicaciones aquí de los diseñadores de Quora:
La vida sin Photoshop
Busca navegadores que no jueguen bien
y empujarlos en la dirección correcta. Puede usar un script como modernizr, js para realizar la detección de funciones en el navegador que se utiliza para mostrar su contenido. Con estas clases puede apuntar a características específicas y cómo los navegadores menos capaces deben manejarlas. Incluso puede usar un script como Dean Edwards IE9.js para corregir automáticamente una gran cantidad de molestos errores de visualización en IE. Puede usar excepciones de IE para hackear IE, puede poner su etiqueta de cuerpo en estos condicionales para que pueda darle una clase al cuerpo o etiqueta html con la versión de IE:
Puede que el siguiente no sea el mejor consejo para usted (o incluso un consejo popular en general), pero me funciona bien para crear diseños de navegador cruzado, por lo que lo incluyo en ese mérito:
Diseño para IE6
Si va a diseñar para cualquier versión de IE, diseñe para IE6. Si se procesa correctamente en IE6, es probable que funcione bien en IE7, IE8 e IE11. IE6, como todos conocemos como webdevs, es horrible, pero podemos domesticar a esta bestia. Luchar contra un diseño existente para que funcione en IE6 es aún peor. Entonces, sí: inicie IE6 temprano en la etapa de desarrollo y detecte los errores más obvios (como el error de margen de 3px).
Cuando trabajo en IE6, uso mucho “overflow: hidden” en lugar de clearfix, porque, por ejemplo, el texto en cursiva puede romper sus columnas en IE6 (entonces algunos píxeles se desbordarán fuera de la caja, lo que desbordará: hidden evitará) . Muy bueno para atrapar esto temprano y hacer que este conocimiento forme parte de su proceso de diseño.
Nunca uses márgenes
IE y los márgenes van juntos como el jabón y la mantequilla de maní. Casi todos los errores flagrantes de IE pueden rastrearse hasta los márgenes. Si utiliza muchos flotadores en su diseño, es probable que aparezca el error de doble margen. Use relleno, use ancho de borde si es necesario, pero evite usar márgenes y evitará la mayoría de los errores.
No use javascript para el diseño
Si incluye (o incluso confía en) JavaScript en el diseño, puede introducir otra lata de gusanos entre navegadores, ya que no todos los navegadores interpretan el JavaScript de la misma manera, o tienen diferentes formas de animar, cambiar el tamaño, etc. Debe probar su JavaScript y sus interacciones con el diseño con el mismo fervor con el que prueba su HTML y CSS.
