Радиокнопка круглая в хроме, но квадрат в firefox

Так, как указано в названии, все одинаково в CSS и HTML, но по какой-то причине firefox отображает переключатели как квадратные.Радиокнопка круглая в хроме, но квадрат в firefox

Если вы открываете http://jsfiddle.net/u2yq3j50/4/ в Chrome, переключатели отображаются в виде кругов. Если вы откроете его в Firefox, он появится в виде квадратов.

Я пробовал -moz-appearance: radio; в #radio-demo input[type="radio"] + label:before, но это не дает желаемого результата, потому что он просто переопределяет мои стили и делает его недоступным.

Любые советы будут замечательными, спасибо!

источник

2014-12-02 echen

Кажется, что вам не хватает префиксов 'border-radius' и' box-shadow'. На самом деле вам больше не нужны префиксы для этих свойств. То же самое для «непрозрачности». –

спасибо! Я думаю, что это был префикс пограничного радиуса! Для фона я могу просто использовать un-prefixed версию тоже? Также вы могли бы объяснить, почему это происходит, когда я использовал только префиксные версии радиуса границы или это просто странная причуда для css? – echen

Основа пришла первую:

-webkit-border-radius: 10px; 
border-radius: 10px;

Проверить это на отъезде:

jsFiddle

Я иногда я так связан с совместимостью браузеров, что я забываю все о не-приставке версии. Here's an "ok" website, где он генерирует базовый код css3, а затем вы можете добавить префиксы для других браузеров.

источник

2014-12-02 19:04:37 Alin

Я хотел бы отметить, что 95% префиксов поставщиков больше не нужны. Самыми большими исключениями являются '-webkit-transform' и' -webkit-animation', которые по какой-то причине по-прежнему не поддерживаются «естественно» в Chrome. –

@nietthedarkabsol Ну, спасибо, что указали это, пока я все еще чувствую себя безопаснее, если я их использую ^^. Как вы сказали, некоторые из них по-прежнему не поддерживаются, и мне это не понравится, если по ошибке я забыл поместить эти исключения, поэтому я скорее поместил их всех, не повредил бы в этом :) – Alin

Радиокнопка круглая в хроме, но квадрат в firefox

ответ

Смежные вопросы