Firefox неправильно отображает отрицательное поле

Question

Мой макет работает правильно, но не в Firefox.Я использую отрицательное поле для отступа сверху и снизу зеленой рамки за видео YouTube.

Вот как это должно выглядеть:

Вот как это выглядит в Firefox:

Вот живая версия для просмотра: живой сайт

Вот js скрипка соответствующего кода: jsfiddle

Изначально я забыл упомянуть, что высота является переменной, потому что в классе .frame будут разные типы видео и фотографий.Есть ли способ решить эту проблему Firefox без определения высоты?

Я также готов реорганизовать это, если есть лучший способ написать это и получить тот же эффект.

Answer 1

Если вы установите высоту зеленой рамки, она, кажется, будет сидеть хорошо.

.framewrap-gr { height: 390px; } 

Я говорю это только потому, что ваша высота iframe кажется фиксированной.1007 *

Я бы порекомендовал изменить способ его построения.Держите контейнерный элемент div, поместите в него тег bg div и video div, z-индексируйте видео поверх слоя bg и задайте стиль слоя bg так, как вам нужно (относительно их родителя)

Answer 2

Возьмите:

Смотрите больше видео на нашем канале YouTube

из и положить его чуть ниже

Это исправляет для меня, тогда вам просто нужно немного сместить h4 влево, что должно быть достаточно просто.

Надеюсь, это поможет, ниже скопированный код

Martyn

Edit: Оставьте HTML в покое и измените CSS для: h4.caption на

h4.caption{
display:table;
padding-right:5px;
text-align:right;
width:100%;
}

Answer 3

вот ваш css:

.framewrap-gr, .framewrap-fb, .framewrap-map {
-moz-border-radius: 10px;
border-radius: 10px;
margin: 50px 0 80px 0;
position: relative;

}

Попробуйте сделать это:

.framewrap-gr, .framewrap-fb, .framewrap-map {
-moz-border-radius: 10px;
border-radius: 10px;
margin: 50px 0 80px 0;
position: relative;
margin-bottom: -15px;

}

Это может сработать, но если это не сработает, проверьте, что Firebug говорит вам!

Извините за плохой английский, я бразилец.