Feature erkennen falschen Überlauf mit Border-Radius

Question

Wie wir wissen, funktioniert overflow: hidden in Kombination mit border-radius nicht in allen Browsern funktionieren, wie es sollte - nämlich Safari und Opera haben Probleme, die abgerundeten Ecken aus enthaltenen Bildern zu schneiden.

Beispiel HTML:

<a class="circle" href="#"> 
    <img src="http://placekitten.com/300/300" alt="kitten" /> 
</a> 

und entsprechende CSS:

.circle { 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    height: 120px; 
    overflow: hidden; 
    width: 120px; 
} 

Kontrolle dieses jsfiddle

Ich habe eine Fallback für Safari und Opera mit Hintergrund-Bilder, aber ich will es nur verwenden, falls overflow nicht gut funktioniert. Nun, ich möchte nicht einfach Browsererkennung für known reasons verwenden, aber ich möchte Feature erkennen die Fähigkeit, die Ecken den richtigen Weg abzuschneiden. Normalerweise würde ich wie folgt zu überprüfen:

if('overflow' in document.body.style){ 
    // overflow 
} else { 
    // no overflow 
} 

Aber das wird diesmal nicht helfen ... Also, gibt es eine Möglichkeit, es richtig zu überprüfen?

Answer 1

Warum nicht css hacks?

@media screen and (-webkit-min-device-pixel-ratio:0) { 

} 

Ich glaube, dass dies Safari und Oper zielt.

Ja, Chrome ist auch Webkit. Nein, es wird nicht betroffen sein.

Souce: http://css-tricks.com/is-there-any-dedicated-css-hacks-for-safari-or-opera/

Opera auch Anbieter CSS-Selektor hat die sicheren imo ist:

x:-o-prefocus { 
}