Ecrasement de la bordure avac Webkit

CyberKral

15 Feb 2011 à 17:25

Bonjour à tous,

Un div intérieur écrase la bordure du div parent sous Chrome et Safari, par contre sous Firefox c'est nickel.
Est-ce que c'est (un bug) connu?
Y a-t-il moyen de contourner ce problème?

Merci d'avance.

<!DOCTYPE html>
<html>
  <head/>
  <body>
    <br/>
    <div style="width: 80px; height: 80px; background-color: red; border-radius: 30px; border: 5px solid gold; overflow:hidden;">
      <div style="position: static; background-color: green; width: 60px; height: 60px; margin: 30px;"></div>
    </div>
	<br/>
    <div style="width: 80px; height: 80px; background-color: red; border-radius: 30px; border: 5px solid gold; overflow:hidden;">
      <div style="position: relative; background-color: green; width: 60px; height: 60px; margin: 30px;"></div>
    </div>
  </body>
</html>

Modifié par fvsch (15 Feb 2011 - 18:39)

fvsch

15 Feb 2011 à 18:43

J'imagine que ces problèmes doivent être connus. À vérifier sur le bug tracker de Webkit.
Quant aux moyens de les éviter, pour ma part je n'en connais pas.

rs459

15 Feb 2011 à 20:41

C'est connu et visiblement la seule solution proposée pour l'instant est de mettre un border-radius sur le contenu interne replacé, ce qui d'ailleurs n'a pas fonctionné avec ton test case.

http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius

CSS et mise en forme, CSS3

Ecrasement de la bordure avac Webkit