2
respuestas

Flexbox no me funciona en Firefox

Buenas! Estoy aplicando el mismo código CSS que se muestra en el aula de este curso y, probando los distintos navegadores veo que, si bien en Chrome funciona correctamente, en Firefox se comporta de manera distinta. Alguien sabe por qué podrá ser? Y cómo podrá solucionarse?

HTML:

<section class="rodapePrincipal-patrocinadores">
            <div class="container">
                <ul class="rodapePrincipal-patrocinadores-list">
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-alura" href="#">
                            <img src="img/logos/alura.svg" alt="Logo da Alura">
                        </a>
                    </li>
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-caelum" href="#">
                            <img src="img/logos/caelum.svg" alt="Logo da Caelum">
                        </a>
                    </li>
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-casaDoCodigo" href="#">
                            <img src="img/logos/cdc.svg" alt="Logo da Casa do Código">
                        </a>
                    </li>
                </ul>
                <form class="rodapePrincipal-contatoForm" action="#">
                    <fieldset>
                        <legend class="rodapePrincipal-contatoForm-legend" for="email-contato">Entre en contacto</legend>
                        <div class="rodapePrincipal-contatoForm-fieldset"> 
                            <input class="rodapePrincipal-contatoForm-emailInput" type="email" name="email-contato" id="email-contato">
                            <button class="rodapePrincipal-contatoForm-submit" type="submit">Enviar</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </section>

CSS:

.rodapePrincipal-patrocinadores .container{
    display: flex;
    justify-content: space-between;
}

.rodapePrincipal-patrocinadores-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70%;
    margin-right: 5%;
}

.rodapePrincipal-contatoForm{
    width: 25%;
}

Chrome

Firefox

2 respuestas

A mi me pso lo mismo con esa pagina... ni me gasté... peeero ahora viendo que tambien te paso... se me ocurre que podrias tratar de hacer el reset de css propio, o buscar reset.css o normalize.css, buscalos asi y te aparecen en google, y tal vez ahi se solucione...

hice lo mismo que vos, empece a modificar los margenes ... pero nunca quedaba, porque el codigo lo veo bien!!!

Sí! Probé ambos y no cambió nada, me terminé rindiendo también jaja. Gracias por la respuesta!