Почему firefox и chrome по разному работают с css?

Question

[Stanislav Pavlov]

Подскажите почему firefox и chrome по разному работают с css?
Установил форму голосования и рейтинга на сайт _https://lik-astana.kz/posmotret-vse-otzyvy.html
все работает хорошо в firefox но вот если открыть эту же страницу в chrome то стили для рейтинга в форме не работают.
Подскажите как решить проблему?

Answer 1

[ValeraValera]

Потому что firefox и chrome используют разные движки рендеринга CSS и по разному реализована спека CSS
В Firefox - Gecko
В Crome - WebKit
Попробуйте использовать префиксы

Answer 2

[Stanislav Pavlov]

Уточните пожалуйста, не совсем понял. Подскажите как это сделать?

Comments

[wertex]

pogugli.com/?323544

[rinatoptimus]

Например, чтобы flexbox работал во всех браузерах, нужно перед обычным display: flex; написать флексбокс с префиксами, и получится так:

display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

Раз стили "поехали", значит, у них нужно прописать префиксы. Как узнать, нужны префиксы тому или иному свойству:
Шпаргалка.

[Stanislav Pavlov]

display: -webkit
Прописан но все ровно не работает. Не могу понять почему.

[rinatoptimus]

Stasweb, Я посмотрел и если верно понял, то fieldset не может принимать свойство flexbox.
Предлагаю у филдсет убрать flexbox, а у дочерних элементов прописать ширину, например, 30пкс.

Answer 3

[Алексей Стрекалов]

можно использовать autoprefixer
https://github.com/postcss/autoprefixer

Answer 4

[tyzberd]

можно сделать так

.input-rating {
    display:block;
    margin: 0px 638px 0px 0px;
    border: none;    
}
.input-rating.radio input, .input-rating.radio label {
    width: auto;
    vertical-align: middle;
}

Comments

[Stanislav Pavlov]

Так тоже не работает

[tyzberd]

что именно не работет? joxi.ru/Y2Lq78Dt93XO7A