Je veux utiliser une bordure arrondie sur mon site. Donc, j'utilise la propriété border arrondi CSS comme ceci:Pourquoi -moz-border-radius-topright ne fonctionne-t-il pas dans Google Chrome?
-moz-border-radius-topright: 7px;
Il fonctionne bien dans Firefox, mais dans Google Chrome, il ne fonctionne pas. Pourquoi?
La raison pour laquelle, est-ce est un sélecteur CSS spécifique Mozilla (Firefox à savoir). Le sélecteur CSS3 pertinent serait:
border-top-right-radius
Webkit (à savoir Safari) comporte également un sélecteur non-standard: -webkit-border-top-right-radius. Puisque Google Chrome est basé sur Webkit, je m'attendrais à -webkit-border-top-right-radius pour fonctionner.
Personnellement, j'inclurais les 3 sélecteurs (comme ci-dessous), alors vous n'aurez pas besoin d'éditer dans le futur quand tout le monde rattrapera la norme. (Firefox 3.5 est déjà là pour autant que je sache).
.thing{
...some styles...
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
}
+1: Yup, y compris tous est le meilleur pour soutenir autant de navigateurs que possible. – Blixt
-moz- ... est pour Firefox, etc ... Utilisez -webkit-:
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
Notez également la légère différence dans la syntaxe.
Vous pouvez les combiner comme vous le souhaitez. -webkit- ... ne seront reconnus par les navigateurs WebKit (Chrome, Safari), -moz- ... ne sera reconnue que par les navigateurs basés sur Mozilla (Firefox.)
Certes, ce n'est pas une propriété standard, cela fonctionne sur les navigateurs basés sur mozilla. –
En effet. Les propriétés qui sont toujours dans les brouillons de travail et qui n'ont pas été approuvées sont généralement précédées d'un identifiant unique au navigateur. Il y en a aussi d'autres comme '-khtml -...' pour les navigateurs basés sur KHTML. – Blixt
Je voudrais ajouter à mon commentaire précédent que '-khtml-' ... pourrait aussi fonctionner dans Chrome, puisque WebKit est une version fourchue de KHTML. – Blixt
Chrome utilise WebKit pour le rendu, même que Safari. Vous devez ajouter une propriété CSS à votre classe -
.YourClass
{
-moz-border-radius-topright: 7px; /* For Mozilla browsers */
-webkit-border-top-right-radius: 7px; /* For WebKit-based browsers */
}
Je veux savoir pour IE. IE est quel type de navigateur? Quelle propriété utiliser – thinzar
@aye thinzar khine: IE utilise un moteur appelé Trident. Mais il ne prend pas en charge les coins arrondis même dans IE7. Cependant, jetez un oeil à ceci: http://dillerdesign.com/experiment/DD_roundies/ – Blixt
Il n'y a aucun moyen que vous pourriez faire dans IE en utilisant le CSS, vous devez soit utiliser des images ou utiliser la bibliothèque comme Nifty Corners - http://www.html.it/articoli/nifty/index.html – Kirtan
-webkit pour safari et chrome. - option http://www.dillerdesign.com/experiment/DD_roundies/ pour tous les navigateurs. – wow