Переопределить CSS с префиксом браузера

Question

У моей страницы есть проблема с отображением на pageload с помощью Safari (отображение встроенного элемента блока имеет ширину 0, после того, как один встроенный стиль JS его отлично). Я могу решить проблему с этим дополнительным стилем для моего диапазона элемента:

display: inline-block; //standard for all browsers 
display: -webkit-inline-box; //safari fix 

я должен использовать в первом стандарте и после этого моего исправления. В версиях текущего браузера он отлично подходит для FF, IE 9-11, Chrome и Safari (Desktop Mac).

Мой вопрос сейчас: Является ли заказ прекрасным или я могу получить с некоторыми браузерами проблему? (Возможно, браузеры думают: «О, я должен сделать встроенный элемент (span) для отображения: inline-block». И со следующей строкой «О, я не знаю этого свойства (-webket-inline-flex), поэтому я использую стандартный дисплей: inline ".)

Надеюсь, вы понимаете, что я имею в виду? :)

Answer 1

Порядок прекрасно, однако вы обнаружите, что любой браузер, который поддерживает -webkit-inline-box будет использовать это более inline-block. Это может вызвать проблемы, поскольку способ реализации браузера с префиксом не может отражать, как реализована версия, отличная от браузера.

Например, Google Chrome поддерживает -webkit-inline-box и будет использовать это вместо inline-block. В верхней части моей головы webkit-inline-box основан на старой устаревшей версии спецификации Flexbox.

Возможно, лучшим решением было бы решить, почему Safari дает вашему элементу inline-block ширину 0. Это не поведение, которое я наблюдал сам, но Safari обычно выходит за рамки производственных браузеров, в которые я тестирую.