IE11：在锚标签上方添加额外的空间答案

【问题标题】：IE11: Add extra space above anchor tagsIE11：在锚标签上方添加额外的空间
【发布时间】：2019-06-04 15:31:13
【问题描述】：

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

【问题讨论】：

stackoverflow.com/questions/4086107/…

标签： css internet-explorer-11

【解决方案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>

结果如下：

【讨论】：