A veces cuando estamos con el front-end de cualquier sitio web, nos topamos con algunos problemas con los diferentes navegadores, que nos generan bastante malestar y dolor de cabeza. Pues dejame decirte que hay un atajo para apuntar a ellos con una simple regla csso (hacks css) y se acabaran todos tus dificultades. Solo les daremos de los principales y los más usados por la audiencia. Mi principal consejo es que hagas todo pensando en el super poderoso Chrome de Google y a partir de allí pongas los hacks para el resto. Pero si no me harás caso pues empiezo dejándote el primero que apunta solo a Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#element { properties:value; }
}El siguiente será solo para todas las versiones de Firefox:
@-moz-document url-prefix() {
h1 {
color: red;
}
}A continuación les dejaremos los dos del gigante de Microsoft.
Internet explorer:
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}Microsoft Edge Browser:
/* Microsoft Edge Browser 12+ (All) - @supports method */
@supports (-ms-ime-align:auto) {
.selector { property:value; }
}
/* Microsoft Edge Browser 15+ - @supports method */
@supports (-ms-ime-align:auto)
and (-webkit-text-stroke:initial) {
.selector { property:value; }
}y por último les dejamos el navegador favorito de la manzanita. Safari:
html[xmlns*=""] .tuclaseoetiqueta{
// Tu código
} 