Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zaokrąglanie krawędzi
Forum PHP.pl > Forum > Po stronie przeglądarki
borpaw
Mam taki styl css, chodzi o zaokrąglanie krawędzi na <img> i działa to na IE, chrome, safari ale nie chce działać na firefox i opera

  1. .radius
  2. {
  3. border-radius: 7px;
  4. -moz-border-radius: 7px;
  5. -webkit-border-radius: 7px;
  6. }


Co tutaj dodać żeby działało też na FF i Opera?
Shili
Zamienić kolejność:

CODE
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;


Tzw. vendor-prefixes (-webkit, -moz) powinny zawsze znaleźć się na początku, a styl css3 na końcu.
Powinno zadziałać to na Firefoksa i Operę (jeśli nie zadziała - upewnij się, że masz nowe wersje przeglądarek).

Natomiast na pewno nie działa to na IE7 i IE8.
kamil4u
Działa: http://jsfiddle.net/9eWR9/

Może zaktualizuj przeglądarkę wink.gif
borpaw
Przestawianie nic nie zmieniło, aktualizacja przeglądarek pomogła ale z tego wynika, że nie ma peności czy u każdego strona będzie wyglądać tak samo.
Shili
Oczywiście że nie ma pewności.
Korzystasz z eksperymentalnej właściwości CSS3 i chcesz, żeby strona wyglądała wszędzie tak samo?

Co nie zmienia faktu, że kolejność podana przeze mnie jest kolejnością poprawną.
Już tłumaczę czemu:

1) Na razie dostawcy przeglądarek mają swoje rozszerzenia eksperymentalne (vendor prefikses), które mogą działać zgodnie ze specyfikacją ale nie muszą
2) W momencie gdy zaczną działać zgodnie ze specyfikacją zaczną korzystać z border-radius zamiast -webkit-border-radius
3) -webkit-border-radius zostanie zachowane, aby utrzymać kompatybilność wsteczną
4) Zostanie użyty ostatni styl, który przeglądarka jest w stanie wyświetlić

Dając border-radius na końcu upewniasz się, że jak już wreszcie przeglądarka zacznie korzystać ze standardu, to u Ciebie na stronie również zacznie korzystać ze standardu zamiast z eksperymentalnego rozszerzenia smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.