J'ai un div relativement positionné dans un div centré de largeur 50% ... Je veux dire l'extérieur est réglé sur la largeur: 50% et la marge gauche/droite: auto. J'ai alors une autre div avec la classe headerContainer et une autre avec l'en-tête de la classe. Il y a une image avec la classe headerImg dans la div en-tête.Google Chrome - bordures courbes buggy?
Il semblerait que, lorsqu'une bordure incurvée de 30px est définie sur la div header et la balise headerImg img, un léger chevauchement de la bordure apparaît de chaque côté ... Je ne sais vraiment pas comment le décrire .. Fondamentalement, dans Google Chrome, la bordure incurvée 30px apparaît parfaitement, mais parfois (environ 2 sur 3 ou 3 sur 4 fois) elle apparaît parfaitement mais la bordure, où elle frappe les points les plus à droite et les plus à gauche, s'étend également de quelques pixels. Il y a une légère inclinaison à la pointe de chaque extrémité, mais à part cela, la bordure supplémentaire sera droite. S'il était possible de télécharger l'image sur ici alors je vous montrerais - mais il n'est pas si je ne peux pas signer à un site d'hébergement d'image ...
Fondamentalement ce que je veux savoir est si ceci se produit pour n'importe qui d'autre. .. Je sais que ce n'est qu'une toute petite chose - mais j'aime que mes sites soient parfaits pour les pixels, pas pour que le pixel étrange soit déplacé ici et là - ça a l'air mauvais.
Quoi qu'il en soit mon code source est la suivante (je l'ai simplifié autant que possible ...):
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
/*background-color: #E7D2B8;*/
background-color: #eeeeff;
color: #863F2B;
}
.page-container {
position: relative;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.headerContainer {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: relative;
clear: right;
}
div.header {
border-top: 2px solid #2e699b;
border-left: 2px solid #2e699b;
border-right: 2px solid #2e699b;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
border-top-right-radius: 30px;
}
img.headerImg {
width: 100%;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
border-top-right-radius: 30px;
}
form {
position: relative;
width: 100%;
height: 100%;
}
<body>
<form method="post">
<div class="page-container">
<div class="headerContainer">
<div class="header">
<img class="headerImg" alt="Header image" src="/Images/header1.png" />
</div>
<div class="clear"></div>
</div>
</div>
</form>
</body>
Toute aide serait grandement apprécié.
Cordialement,
Richard
PS Je verrai ce que je peux faire sur le téléchargement d'une image plus tard, si elle est encore un problème.
Je ne vois pas votre problème, tout fonctionne avec mon Google Chrome 6.0.472.53. Peut-être que c'est l'algorithme du coin arrondi et le redimensionnement du conteneur qui cause cela ..? – MatTheCat
J'ai posté l'image maintenant - voir la réponse ci-dessous. – ClarkeyBoy
Ont posté le code sur mon site Web de papas - http: //www.heritageartpapers.com/border-bug.html ... il se produit là aussi. Vous devrez peut-être actualiser la page plusieurs fois pour qu'elle se produise car elle ne se produit pas à chaque fois. – ClarkeyBoy