css - IE11 : Add extra space above anchor tags

Question

我阅读了很多关于如何在 anchor 标记上方添加额外空间的建议，但没有一个在 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>

结果如下: