IE11：在定位标记上方添加额外的空间

Question

我阅读了许多关于如何在锚标记上方添加额外空间的建议，但这些建议都无法在IE11中使用。

我在它们上方需要250 px的空间，因为我的标头高约250 px。

我尝试了两种最有前途的方法，一种具有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>

结果如下：