css of ::before селектор псевдоэлементов не отображается в Safari

#html #css #safari #bootstrap-4

#HTML #css #safari #bootstrap-4

Вопрос:

Существует фоновый фрейм, внутри которого я хочу показать вертикальное видео (соотношение сторон 4: 5), для которого я присвоил псевдоселектору ::before значение верхнего отступа 125%. Он отлично отображается во всех браузерах / ОС, кроме браузера Safari. Я погуглил и попробовал несколько вещей, но ни одна из них не сработала.

Изначально я думал, что он, должно быть, был кэширован, как и изменения css, поэтому жестко обновил страницу, очистил историю браузера. Кроме того, я добавил свойство postion: absolute. Ничего не получилось.

 <div class="backgroundImageClass">
<div class="embed-responsive embed-responsive-9by16">
<iframe></iframe>
</div>
</div>
  

css является —

 .embed-responsive-9by16::before {
display: block;
content: "";
padding-top: 125%;
}
  

Я ожидал, что свойство ::before будет принято. Но он не используется. CSS просто не отображается, когда я проверяю его элемент. Фоновое изображение видно только в средней части.

Комментарии:

1. Если у вас есть проблема с css, пожалуйста, добавьте свой css в пример кода. (Попробуйте использовать фрагмент кода.)

2. Я согласен с TVBZ. Вы должны добавить snipped, чтобы помочь нам проанализировать код и помочь вам. Но просто чтобы отбросить идею, попробуйте использовать box-sizing: border-box . Подумайте, что в противном случае заполнение добавляет высоту вашему элементу, поэтому процентная единица создает цикл в логике CSS, и это может плохо управляться некоторыми браузерами.

3. У меня такая же проблема. Любая помощь будет оценена