Почему в Google Chrome не работает -moz-border-radius-topright?

Question

Я хочу использовать закругленную рамку на своем сайте. Таким образом, я использую CSS закругленные границы собственности, как это:

-moz-border-radius-topright: 7px; 

Он хорошо работает в Firefox, но в Google Chrome, он не работает. Зачем?

Answer 1

Причина, в том, что является специфической Mozilla (т.е. Firefox) селектор CSS. Соответствующий селектор CSS3 будет:

border-top-right-radius 

Webkit (т.е. Сафари) также имеет нестандартную селектор: -webkit-border-top-right-radius. Поскольку Google Chrome основан на Webkit, я ожидал бы, что -webkit-border-top-right-radius будет работать.

Я лично включил бы все 3 селектора (как показано ниже), тогда вам не придется редактировать когда-нибудь в будущем, когда все догоняют стандарт. (Firefox 3.5 уже существует, насколько я знаю).

.thing{ 
...some styles... 
-moz-border-radius-topright:7px; 
-webkit-border-top-right-radius:7px; 
border-top-right-radius:7px; 
} 

Answer 2

-moz- ... для Firefox и т.д. Используйте -webkit- ...:

-webkit-border-top-right-radius: 7px; 
-moz-border-radius-topright: 7px; 

отметить также небольшое различие в синтаксисе.

Вы можете комбинировать их по своему усмотрению. -webkit- ... будет признана только WebKit браузеров (Chrome, Safari) -moz- ... будет распознаваться только браузерами Mozilla на основе (Firefox).

Answer 3

Chrome использует WebKit для рендеринга, так же, как Safari. Вы должны добавить еще один CSS свойство вашего класса -

.YourClass 
{ 
    -moz-border-radius-topright: 7px; /* For Mozilla browsers */ 
    -webkit-border-top-right-radius: 7px; /* For WebKit-based browsers */ 
}