在锚标记中居中显示bg图像的跨度

问题描述：

我试图在锚标记内居中显示一个元素（显示通过背景图像的图标）。 FF和Chrome正在完善他们的工作，但所有的IE版本都让我感到恶心。如果你的某个人对我有欺骗，那将是很酷的。在锚标记中居中显示bg图像的跨度

你可以找到正确中心版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; 
}

The ancho r标签的计算公式为863px，跨度宽度为16px。

你有没有尝试过'背景位置：中心;'？ – azhpo 2014-12-04 08:25:09

我向.show-more-arrow添加了这种风格，但它没有做出改变... – 2014-12-04 09:08:30

答

因为你用position: absolute;跨度将被视为一个块元素，position: absolute;是没用的，你可以用display: inline-block;取代它，希望它可以帮助

Thx很多。这使它工作！ – 2014-12-04 09:07:54

答

在我的经验，我有源泉这个黑客通过CSS规则IE和Chrome忽略。
这是代码。

.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图像的跨度

相关推荐