28172 sujets

CSS et mise en forme, CSS3

Décalage entre background-color et border

Bonjour tout le monde!

Alors voilà, j'ai un petit soucis d'affichage et malgré les heures passées à chercher sur mon meilleur ami Google, pas l'ombre d'une solution...
J'ai une <div> avec bordure, qui contient un titre avec un background-color de la même couleur que la bordure. Sur chrome et Firefox, aucun problème; par contre sur nos amis Edge et IE, et suivant l'écran utilisé, j'ai un décalage entre le background et la bordure... Ci-dessous quelques images pour illustrer mon problème, ainsi que le CSS et HTML.

Merci pour vos lumières! Smiley biggrin

Affichage sous Chrome et Firefox:
upload/1559145288-75833-chrome.png
Affichage sous Edge et IE11:
upload/1559145339-75833-edge.png

CSS :

.closed-box {
    border: solid 2px;
    border-radius: 20px;
    margin: 5px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
    box-shadow: 2px 2px 5px #4d4f52;
}

.closed-box__title {
    border-radius: 16px 16px 0 0;
    font-size: 0.975rem;
    margin: 0 0 8px;
    padding: 5px;
    font-weight: 500;
    letter-spacing: .05rem;
}
.c--wbb {
	background-color: #fff; 
	border-color: #0a4393; 
	color: #0a4393;
}
.c--bw {
	background-color: #0a4393; 
	color: #fff; 
}


HTML :

<div class="closed-box c--wbb">
	<h2 class="closed-box__title c--bw">Espace utilisateur</h2>
	<ul>
		<li><a class="link--bo" href="#">Mon profil</a></li>
		<li><a class="link--bo" href="#">Messagerie</a></li>
		<li><a class="link--bo" href="#">Déconnexion</a></li>
	</ul>
</div>
Bonjour Allan,
Même problème avec ton code sur IE et Edge Smiley ohwell
Par contre je pense vraiment qu'il y a un lien avec la taille de la fenêtre ou de l'écran: avec IE, suivant la taille de la fenêtre le bug apparait ou pas... Vraiment bizarre!

Edit:
J'ai trouvé le problème! Mais du coup j'en ai un autre... En fait, le code CSS que j'ai affiché n'est pas mon code, toutes les valeurs en px sont remplacées par la fonction ci-dessous, afin de convertir les px en rem. Du coup peut-être un problème de calcul ou d'arrondi?

@function rem($pixels, $context: $browser-context) {
  @return #{$pixels/$context}rem;
}

Modifié par Mathieu8337 (30 May 2019 - 09:04)
Re,

Je coince...je vois pas trop....faudrait regarder tout le code CSS, surtout les règles de bases, le fichier reset si présent, est-ce dû à l'utilisation de rem, je vois pas trop...j'espère que les autres s'auront t'aider....
Merci en tous cas pour ton aide! Smiley smile
Il me semble avoir vu quelque part un jour que IE ne prenait que 2 chiffres après la virgule sur les décimaux, et avec les rem on en a souvent 3 ou 4... Faut que je vérifie ça!
Bonjour Mathieu8337,

Je n'arrive pas non plus a reproduire le bug,
Que cela soit avec ton code sous Edge et IE11
ou via le jsfiddle de @allan00958
Il est possible d'avoir l'ensemble du code HTML et CSS
Peux ton voir la page quelque part?
Sujet clos
Aller à