IE11: добавить дополнительное пространство над тегами привязки

Question

Я прочитал много предложений, как добавить дополнительный пробел над тегами привязки, но ни один из них не работает в IE11.

Мне нужно 250 пикселей над ними, потому что мой липкий заголовок имеет высоту около 250 пикселей.

Я попробовал два наиболее перспективных метода: один с элементом target, а второй - с элементами id:

/* target-Method: Working in Chrome, but not working in IE 11 */

:target::before {
  content:"";
  display:inline-block;
  height:250px; 
  margin:-250px 0 0 0; 
} 

/* id+before - Method: Working in Chrome, but not working in IE 11 */

h2[id], h3[id] { 
    position: relative;
    z-index: 1;
}
h2[id]::before, h3[id]::before { 
  display: inline-block !important; 
  content: ' ' !important;
  height: 250px !important;
  margin-top: -250px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute; 
  z-index: -1; 
}

Но ни один из них не работает в IE11.

Или перекрывают ссылку в элементе выше!

Codepen (здесь без липкого заголовка): https://codepen.io/abc001/pen/oRmmwp

Answer 1

Попробуйте использовать следующий код с вашими HTML-элементами:

<style>
    /* target-Method: Working in Chrome, but not working in IE 11 */
    :target::before {
        content: "" !important;
        display: inline-block !important;
        background-color: antiquewhite !important;
        height: 250px !important;
        width: 100% !important;
        margin-top:250px;
    }

    /* id+before - Method: Working in Chrome, but not working in IE 11 */
    h2[id], h3[id] {
        position: relative;
        z-index: 1;
    }

        h2[id]::before, h3[id]::before {
            content: ' RR this -';
        }

    /* Spacer */
    .spacer {
        width: 100%;
        height: 500px;
    }

    .row .col-12{
        background-color:aquamarine
    }
</style>

Результат как показано ниже: