Mam problem z Chrome ignorujączaokrąglone rogi mojego menu na zawisie. Działa to zarówno w Firefoksie, jak i zaokrąglając rogi (w chromie) przed zawisaniem, jednak po najechaniu na moje rogi ustawiamy się w górę. Czy czegoś mi brakuje? Mój HTML składa się ze standardowej ul.
#nav > ul > li:first-child a:hover {
-moz-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomleft: 4px !important;
-border-bottom-left-radius: 4px !important;
-moz-border-radius-topleft: 4px;
-webkit-border-radius-topleft: 4px !important;
-border-top-left-radius: 4px !important;
background: url(../images/menu-back-hover.png) repeat-x;
}
Odpowiedzi:
6 dla odpowiedzi № 1Selektor przeglądarek webkit (np. Chrome) powinien być:
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
0 dla odpowiedzi nr 2
Następujące elementy zostały zastosowane do elementu nadrzędnego z promieniem granicznym zastosowanym do kopnięcia webkita z powrotem do linii:
-webkit-mask-image: -webkit-radial-gradient(white, black);
Inną opcją jest zawinięcie elementu w dwóch rodziców promienia granicznego.
Wydaje mi się hacky, ale o wiele lepiej niż opcja podwójnego zawijania - zainteresowani innymi rozwiązaniami.