Question

我正在尝试将一个元素（通过背景图像显示图标）置于锚标记内。 FF和Chrome正在使他们的工作变得完美，但所有IE版本都让我生病了。如果有人对我有诀窍，那会很酷。

您可以在此处找到正确的居中firefox版本：http://i.stack.imgur.com/o3i62.png

这里的IE版本不正确：http://i.stack.imgur.com/nDPno.png

这是我的HTML代码：

<a href="#" class="show-more"><span class="show-more-arrrow"></span></a>

我的SCSS代码：

.show-more{
        height: 15px;
        width: 100%;
        background: none repeat scroll 0 0 rgba(239, 239, 239, 1.0);
        text-align: center;
        padding-top: 2px;
        position: absolute;
        bottom: -12px;
    }
.show-more-arrrow {
        background-image: url(../images/arrow-submenu-large-hover.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 10px;
        position: absolute;
        width: 16px;
}

锚标记的计算结果为863px，跨度的宽度为16px。

Answer 1

因为您使用position: absolute;该范围将被视为一个块元素，position: absolute;无效，您可以将其替换为display: inline-block;，希望它可以提供帮助

Answer 2

根据我的经验，我认为这个黑客可以通过IE和Chrome忽略的CSS规则这是代码。

.show-more:not(*:root){
    height: 15px;
    width: 100%;
    background: none repeat scroll 0 0 rgba(239, 239, 239, 1.0);
    text-align: center;
    padding-top: 2px;
    position: absolute;
    bottom: -12px;
}
.show-more-arrrow:not(*:root){ 
        background-image: url(../images/arrow-submenu-large-hover.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 10px;
        position: absolute;
        width: 16px;
}

如果这对你的情况有帮助，请告诉我。

使用bg-image在锚标记中居中

2 个答案: