Narożniki z zaokrąglonymi rogami CSS3 nie działają w Safari/Chrome?

Szczęśliwie hackowałem się na tej stronie, testując ją w Firefoksie i Internet Explorerze 9, przyjmując za pewnik, że Safari i Chrome wykażą mój CSS3 dobrze, kiedy odkryłem, że tak nie jest.Narożniki z zaokrąglonymi rogami CSS3 nie działają w Safari/Chrome?

W FF i IE9 widzę tak:

enter image description here

w Safari/Chrome widzę tak:

enter image description here

Oto HTML:

<div class="container"> 
    <div> 
     <img src="static/images/image1.jpg" alt="" /> 
    </div>

Oto CSS:

.container { 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius: 10px; 
    }

Co robię źle? :(

UPDATE
proszę zobaczyć działający przykład problemu mam. http://jsfiddle.net/jAsnU/3 Dzięki

Źródło

2011-05-25 Chuck Le Butt

try:

.container img { 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius: 10px; 
}

Źródło

2011-05-25 19:59:18 ohmusama

Chciałbym poznać specyfikę tego, dlaczego to działa i dlaczego przeglądarki Webkit nie ukryły przepełnienia, ale to była odpowiedź. Dzięki! –

Niedawno miałem ten sam problem. I to było jedyne rozwiązanie, które zadziałało dla mnie. Dlaczego to działało? Zakładam, że to dlatego, że webkit w rzeczywistości nie rejestruje zaokrąglenia elementów macierzystych dla dzieci. Jeśli masz dziecko div, może również potrzebować zaokrąglenia. Możesz zrobić ten eksperyment i udowodnić to sobie. – ohmusama

myślę, że trzeba określić border

Tak, coś takiego.:

border:1px solid blue; // cokolwiek niebieski używasz.

wygląda jakby FF i ja E daje ci zaokrągloną granicę ... ale jako pustą pozycję, która odcina obraz.

Źródło

2011-05-25 19:51:52

spróbuj dodać "overflow: hidden;" do stylu div. Zrobiłem szybką stronę testową na jsfiddle i wyglądało na to, że działa (przetestowałem to w Chrome, Safari i FireFox): http://jsfiddle.net/wabw8/

Źródło

2011-05-25 19:59:19 patorjk

Podczas gdy JS Fiddle działa dobrze, nie działa, gdy próbuję go w moim projekcie. Bardzo irytujące! Myślę, że musi to mieć coś wspólnego z faktem, że obrazy są dodawane później przez javascript jako część karuzeli (http://slidesjs.com/). –

Nie widzę, gdzie na tej stronie jest stosowany promień obramowania (chyba że jeszcze go nie przeniesiono do produkcji). – patorjk

Tutaj. Teraz możesz zobaczyć: http://jsfiddle.net/jAsnU/3/ –

Możesz chcieć ustawić promień obramowania na .container div img.

Źródło

2011-05-25 19:59:36 Dan

+1 Dzięki. Twoja odpowiedź zadziałała, ale ohmusama dał lepszy. –

Tak, 4 osoby napisały odpowiedź na to pytanie w niecałą minutę! ha ha – Dan

Narożniki z zaokrąglonymi rogami CSS3 nie działają w Safari/Chrome?

Odpowiedz

Powiązane problemy