Problème Flex Firefox par thomastartas - page 1

Hello, j'ai un soucis de flex sur firefox, j'ai un bout de code qui est censé donc centrer des images dans une div.

Je l'ai donc fait avec un flex dans le css, or sur Chrome ça marche nickel, mais sur Firefox j'ai mon "a" qui dépasse les image est donc les décale (le cadre rouge représente la Taille du a qui est trop longue sur firefox alors que sur Chrome elle s'adapte parfaitement)

Comment faire en sorte que ça passe sur firefox ?

Version Firefox :

Version Chrome avec le même Code :

Code complet de la page HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Event Gaming Army</title>
        <meta charset="UTF-8">
        <meta name="description" content="Site Web dédié à la communauté/structure Gaming Army">
        <meta name="keywords" content="Gaming Army, Gaming, Army, Esport, Structure français, PUBG, Playerunknown battleground">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Thomas TARTAS">
        <link href="CSS/stylegeneral.css" rel="stylesheet" type="text/css"/>
        <link href="CSS/event.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="equipe.html">L'équipe</a></li>
                <li><a href="video.html">Nos Vidéo</a></li>
                <li><a href="planning.html">Planning</a></li>
                <li><img class="logo_ga" src="img/logo.jpg" alt="Logo GA"/></li>
                <li><a href="event.html">Evenements</a></li>
                <li><a href="recrutement.html">Recrutement</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li class="logo_nav_discord"><a class="link" href="https://discord.me/gamingarmypubg" target="_blank"></a></li>
                <li class="logo_nav_twitter"><a class="link" href="https://twitter.com/Gaming_ArmyPUBG" target="_blank"></a></li>
            </ul>
        </nav>
        <section>
            <h2>Evenement à venir</h2>
            <div class="event_pass">
                <a href="" target="">
                    <img src="img/saison1.png" alt="GLL PUBG"/>
                </a>
                <a class="seperate" href="" target="">
                    <img src="img/wingman.png" alt="Chicken Cup #2"/>
                </a>
            </div>
            <h2>Evenement passé</h2>
            <div class="event_pass">
                <a href="https://gamewave.fr/pubg/competition/tribe-battlegrounds-1/classement-1/" target="_blank">
                    <img src="img/tribepubg.jpg" alt="Tribe PUBG"/>
                </a>
                <a class="seperate" href="https://gamewave.fr/pubg/competition/chicken-cup-obsidius-2/classement-2/" target="_blank">
                    <img src="img/chickencup2.jpg" alt="Chicken Cup #2"/>
                </a>
            </div>
        </section>
        <footer>
            <ul class="txt_footer">
                <li>2018 Copyright GamingArmy</li>
                <li>version 0.1</li>
            </ul>
        </footer>
    </body>
</html>

Code complet de la feuille de style dédié à l'intérieur de la page (donc pas le nav, pas le footer) :

h2 {
    text-align: center;
    font-size: 50px;
    padding-left: 0px;
}

.event_pass {
    height: 150px;
    margin: auto;
    margin-top: 15px;
    /*width: 582px;*/
    display: flex;
    justify-content: center;
}

.event_pass img {
    height: 100%;
}

.seperate {
    margin-left: 10px;
}

Problème Flex Firefox

Problème Flex Firefox

Supprimer

Modérer

Signaler le message aux modérateurs