css - IE11:在定位标记上方添加额外的空间

我读了许多关于如何在锚标记上方添加额外空间的建议，但这些建议在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

最佳答案

尝试对您的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>

结果如下：