0

Estoy maquetando unos botones, pero si uso por ejemplo un elemento anchor y un elemento button no presentan el mismo aspecto en diferentes navegadores (Chromium 84.0.4147.105 - Build oficial on Ubuntu / Moxilla Firefox 79.0 for Ubuntu).

Chromium aplica estilos de navegador y Firefox no, entonces en principio obtengo:

imagen en Chromium

en Chromium y el siguiente resultado en Firefox:

imagen en Firefox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        /*** reset ***/

        *,
        *:before,
        *:after {
            -moz-box-sizing   : border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin    : 0;
            padding   : 0;
            text-align: center
        }
        html {
            font-size: calc(5px+1vw)
        }


        /*** estilos botones ***/

        .btn {
            -moz-font-size: auto;
            font-size     : inherit;
            appearance    : button;


            background    : rgb(41, 40, 40);
            border        : 1px solid grey;
            border-radius : 3px;
            color         : white;
            cursor        : pointer;
            font-weight   : 600;
            padding       : 1rem;
            text-decoration: none;
        }
    </style>
</head>
<body style="background: grey; padding: 1rem;">

    <main>
        <a href="" class="btn">
            anchor
        </a>
        <button class="btn">
            button
        </button>
    </main>
</body>
</html>

Las siguiente propiedades son las que están afectando a la visualización en uno u otro:

font-size  : inherit;
appearance : button;

font-size : inherit; en Chromium esta haciendo que ambos botones tengan el mismo tamaño, pero desigual en Firefox, si se quita es al contrario. Probé -moz-font-size: auto; para tratar de corregirlo pero no es válido.

Luego la propiedad: appearance : button; se aplica en Chromium por el navegador a elementos de tipo input y buttom y es responsable de la separación entre los botones, que me resulta adecuada por lo que la he agregado para que aplique también a los botones anchor. Esta propiedad no funciona en Firefox.

Entonces tengo dos problemas entre navegadores:

  • Tamaño desigual de ambos botones
  • La separación entre ambos botones

El resultado que quisiera obtener es el de la primera imagen.

1 respuesta 1

0

Una propuesta de solución sería:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <style>

        /*** reset ***/

        *,
        *:before,
        *:after {
            -moz-box-sizing   : border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-family: 'Nunito', sans-serif;
            margin    : 0;
            padding   : 0;
            text-align: center
        }
        html {
            font-size: calc(5px+1vw);
        }


         /*** estilos botones ***/

        .btn {
            background    : rgb(41, 40, 40);
            border        : 1px solid grey;
            border-radius : 3px;
            color         : white;

            appearance        : button;
            cursor            : pointer;
            display           : inline-block;
            font-size         : inherit;
            font-weight       : 600;
            list-style        : none;
            padding           : 1rem;
            text-decoration   : none;
            vertical-align    : middle;
        }
    </style>
</head>
<body style="background: grey; padding: 1rem;">

    <main>
        <a href="" class="btn">
            anchor
        </a>
        <button class="btn">
            button
        </button>
    </main>
</body>
</html>

Aunque no esta en la pregunta (no me di cuenta al crear el ejemplo mínimo): ambos botones presentan una fuente diferente. Se debe indicar una fuente para el documento, por ejemplo en el reset. Esto corrige el tamaño desigual.

Otros estilos añadidos.

Corrige el problema de espaciado horizontal entre los botones en Firefox:

display: inline-block;

Corrige posibles problemas con la alineación vertical de los botones:

vertical-align: middle;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.