Почему edge cчитает позицию при abosolute иначе, чем chrome/firefox?

Question

[Сергей Нижний Новгород]

Всем привет.

Вот так элемент отображается в chome/firexo



Вот так элемент отображается в edge:



Код html:

<div class="small-12 medium-6 large-3 columns"> #Zurb Foundation
    <div class="video_frame">
         <a class="vimenu_link" href="{% url 'video' video.id %}">
             <p class="vimenu_play"><i class="fa fa-play" aria-hidden="true"></i></p> #стрелочка
              <img class="vimenu_image" src="{{ video.video_image.url }}"/>
              <h6 class="index_videomain_title">{{ video.title }}</h6>
          </a>
    </div>
 </div>

Сами CSS:

.video_frame {
    margin: 1rem 0 0 0;
}

.vimenu_link {
    position: relative;
    z-index: 100;
}

.vimenu_play {
    position: absolute;
    top: -100%;
    left: 45%;
    font-size: 2rem;
    z-index: 2000;
    vertical-align: middle;
    text-align: center;
}

.vimenu_image {
    margin: 0 0 1rem 0;
}

.index_videomain_title {    
    color: #528ebd;
    padding: 0 0.2rem 0 0.2rem;
    font-size: 0.9rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    overflow: hidden;
    display: block;    
}

И получается ситуация, что если я как-то начинаю подкручивать top и left - то они опять же по разному отображается в edge и chrome/firefox - как будто у них разные точки старта сдвига.

Что можно сделать?

Answer 1

[Виталий Инчин ☢]

Тег a является строчным элементом и в такой ситуации по высоте растягивается не по размерам контента, а лишь на несколько пикселей (переводы строк и пробелы в коде).
Некоторые (edge) браузеры прижмут его к верху родительского блока, а некоторые к низу.

Либо сделайте элемент .video_link блочным, либо поставте relative для .video_frame за место .video_link.

Comments

[Сергей Нижний Новгород]

Благодарю

Answer 2

[Андрей Верх]

В добавок, в строчные элементы A, нельзя вкладывать блочные P, H6

Comments

[Сергей delphinpro]

можно, ваши сведения устарели, сэр.

[Андрей Саныч]

можно i.imgur.com/YWbL6i9.png

[Андрей Саныч]

Виталий Инчин ☢: та ну) i.imgur.com/HYpJ7Jb.png

[Виталий Инчин ☢]

Андрей Саныч: уже удалил коммент, в связи с тем, что сейчас не имею дрступа к ПК и не могу доказать сей факт.
Речь идет скорее о частных случаях, нужно вспоминать подробнее..

[Андрей Саныч]

Виталий Инчин ☢: возможно в более старых версиях фф такое было

[Виталий Инчин ☢]

Андрей Саныч: около года назад столкнулся с данной проблемой, возможно, действительно, тонкости поддержки ff html5 в то время.

Answer 3

[Антон]

Тут явно где-то не хватает position:relative;
video_frame вот тут попробуй

Comments

[Сергей Нижний Новгород]

Нет, не помогает =(