¿Cómo hago que un sitio web se vea igual en todas las versiones de navegadores?

Vishwas Kale | Ingeniero de Pruebas de Software | Ingeniero de Pruebas de Automatización

Comparta URL para que pueda sugerirle más.

El sitio no se muestra en su mayoría en todos los navegadores. Es cierto que no puede mostrar su sitio exactamente igual en todos los navegadores.

  1. En primer lugar, evite Internet Explorer 9, 8 y Windows Safari.
  2. Utilice siempre la altura y el ancho en porcentaje%. Entonces% sabio se ajusta automáticamente.
  3. Utilice siempre el elemento secundario div con ancho CSS: 80%; margen izquierdo: auto; margen derecho: auto ;.
  4. Toda la página debe dividirse en sección con un porcentaje de altura como se indica a continuación
    a) cabecera 15%;
    b) contenedor principal 85%
    c) pie de página 5%
  5. En mac safari evita la familia de fuentes, muchas fuentes no funcionan en mac safari.
  6. Para efectos HTML5 como efectos de transición, use CSS de acuerdo con el navegador como
    -webkit-, -ms-, -o- etc puedes encontrar aún más mediante la búsqueda en google.
  7. Siempre escriba el código de acuerdo con el estándar, no escriba el código sin saberlo.
    Ejemplo: – diferencia entre span, div, sección, aparte, artículo
  8. La imagen de fondo también se comporta de manera diferente, depende de usted cómo puede asignar una posición de fondo como 100%, centro, automático, etc.

Al desarrollar cualquier prueba de sitio simultáneamente.

Primero debe restablecer todos los valores predeterminados del navegador.

Lea esto en Stack Overflow que analiza normalize.css y reset css
¿Cuál es la diferencia entre Normalize.css y Reset CSS?

así que también quiero seguir las convenciones más antiguas en lugar de usar HTML5 innecesario. Por ejemplo, sugeriría

en lugar de

 

Y deja de desarrollar mientras pruebas en Chrome. Veo mis páginas en Firefox mientras codifico y pruebo a medida que avanzo en una versión anterior de Internet Explorer. Prueba en Chrome al final. De esta manera no hay sorpresas desagradables más tarde.

Use diseños web receptivos. Existen algunos marcos realmente buenos y fáciles de usar para diseñar sitios web receptivos, siendo Bootstrap el más popular.

También estoy de acuerdo con Juan, primero prueba en Firefox e IE y mantengo Chrome para el final.

Aquí es donde entran en escena los elementos receptivos del diseño. En un diseño receptivo, vigile el modelo de caja. Un modelo de caja no es más que un área rectangular donde se coloca su contenido. Dar ancho en porcentajes no en píxeles. Pon las imágenes en div y dale un ancho al div y haz el ancho de la imagen al 100%. Si aún tiene preguntas, comente aquí.