css Différence d'affichage align-items selon navigateur

Nicolas

Membre actif
Hello tout le monde,

A l'instar de Wazz9 qui rencontre des problèmes d'affichage de police selon le navigateur CSS - font-weight, affichage différent selon le navigateur j'ai également un problème entre Chrome et FireFox.

Ici l'affichage dans FireFox
Capture d’écran 2021-01-30 163153.png


Et là dans Chrome
Capture d’écran 2021-01-30 163214.png


voici le CSS concerné
CSS
.bi-desc {
    display: flex;
    align-items: end;
}

.block-description-flex {
    width: 80%;
    padding: 8px 10px 15px 0;
    color: rgb(66, 66, 66);
    font-size: 14px;
}

.block-ads-flex {
    width: 20%;
}

Et l'HTML
HTML
<div class="bi-desc">
    <div class="block-description-flex">
        <div class="title-box" id="developpement">
            <a href="/categories/developpement-et-conception-web.43/">Développement et conception Web</a>
        </div>
        Consultez les questions et leurs réponses ou exposez votre problème en posant votre question.<br />
        Améliorez vos compétences en matière de développement Web avec l'aide de la communauté.<br />
        Partagez votre expertise en répondant aux questions non résolues.
    </div>
    <div class="block-ads-flex">
        <img src="data/assets/logo/web.png" id="web" />
    </div>
</div>

Qu'en pensez-vous ??
 

Nicolas

Membre actif
Bon résolu avec
CSS
.block-description-flex {
    position: relative; /* nouveau */
    top: 75px; /* nouveau */
    width: 80%;
    padding: 8px 10px 15px 0;
    color: rgb(66, 66, 66);
    font-size: 14px;
}

Mais étonnant tout de même que le moteur de rendu CSS de Chrome (et Edge du coup) n’interprète pas align-items: end; :unsure:
 

Anthony

Membre
Donc on peut supposer que FireFox corrige le mauvais CSS automatiquement en remplaçant end par flex-end puisque le rendu est le même qu'après la modification du code CSS par Nicolas. Chrome par contre ne le fait pas et "affiche" en quelque sorte l'erreur puisque le rendu n'est pas conforme à ce qu'espérait Nicolas avec son premier code CSS.

On pourrait penser que FireFox dispose d'une sorte d'AI qui permet cela mais je trouve que c'est à double-tranchant car cela fait croire que le code CSS est bon alors qu'il ne l'est pas. Ok n'importe quel développeur se doit de vérifier son site sur les différents navigateurs mais ça pourrait échapper au développeur. Donc pour moi mauvais point pour FF dans ce cas.

Enfin si mon raisonnement de base est bon, c'est à dire si FF corrige automatiquement les erreurs CSS quand il le peut.

Nicolas Quid de Safari sur Mac ? As-tu les moyens de vérifier ?
 

WWWest

Membre
c'est à double-tranchant car cela fait croire que le code CSS est bon alors qu'il ne l'est pas. Ok n'importe quel développeur se doit de vérifier son site sur les différents navigateurs
Oui ça se discute car il est évident que tout bon développeur se doit de vérifier son site sur les principaux navigateurs et l'idée de FF de réajuster le code CSS en détectant un code défaillant peut être intéressant pour les visiteurs.
 

yule

Membre
Effectivement.. Chacun y va de ça petite surcouche... étonnant.

Blink, utilisé par Brave, Google Chrome, Chromium, Microsoft Edge, Epic Privacy Browser, Falkon, Maxthon, Opera, Samsung Internet, Slimjet, SRWare Iron, Vivaldi et Yandex Browser

Gecko, utilisé par Mozilla Firefox, Firefox Focus, Firefox Mobile, IceCat, K-Meleon, Pale Moon, SeaMonkey, TenFourFox, Tor et Waterfox

Opéra
opera.jpg



Et Edge

edge.jpg


Sinon je te conseil vivement le .htaccess sur ce fichier.

Je n'utilises pas de CMS ou autres mais quand je vois le nombre de personne qui tente une ouverture sur mon site de ce genre ht*tps//monsite.xyz/wp-admin.php

Bonne bonne
Yule
 
Dernière édition:

Wazz9

Membre
Effectivement.. Chacun y va de ça petite surcouche... étonnant.

Blink, utilisé par Brave, Google Chrome, Chromium, Microsoft Edge, Epic Privacy Browser, Falkon, Maxthon, Opera, Samsung Internet, Slimjet, SRWare Iron, Vivaldi et Yandex Browser

Gecko, utilisé par Mozilla Firefox, Firefox Focus, Firefox Mobile, IceCat, K-Meleon, Pale Moon, SeaMonkey, TenFourFox, Tor et Waterfox

Opéra
Voir la pièce-jointe: 160


Et Edge

Voir la pièce-jointe: 161


Sinon je te conseil vivement le .htaccess sur ce fichier.

Je n'utilises pas de CMS ou autres mais quand je vois le nombre de personne qui tente une ouverture sur mon site de ce genre ht*tps//monsite.xyz/wp-admin.php

Bonne bonne
Yule
Salut Yule, la différence sur tes capture d'écran c'est que sur ton Opéra les 2 champs sont activés par ton login et MDP et non sur Edge, efface les champs login/mdp sur Opéra et tu auras le même rendu.
Chrome et Edge sont basés sur Chromium ils affichent à 99% des cas la même chose ;)
 

Ces discussions pourraient vous intéresser...

J'ai un petit souci avec l'examen Page speed de Google qui obtient un mauvais résultat à cause de ressources JavaScript qui bloquent le rendu. Donc dans mon cas, il y a bien un script JS qui est appelé dans le header de mon fichier HTML. J'ai tenté de faire un defer puis un async mais...
Salut, Je suis en train de tester bootstrap sur mon localhost et j'ai un problème d'affichage. Je m'explique : Je veux afficher 4 colonnes qui contiennent chacune d'entre elles du texte mais j'ai beau chercher je ne comprends pas pourquoi elles s'affichent une au dessus des autres...
Bonjour à toutes et à tous, Dans la lignée des exercices PHP X, je vous propose aujourd'hui un exercice JavaScript ! Il est très simple et ne nécessite qu'une seule fonction. C'est une ligne de code que l'on doit trouver, elle doit être capable de fusionner 2 tableaux. Voici des...
Haut