在錨標記中居中顯示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。

來源

2014-12-04 Smarty_Coder

你有沒有嘗試過'背景位置：中心;'？ – azhpo 2014-12-04 08:25:09

我向.show-more-arrow添加了這種風格，但它沒有做出改變... – 2014-12-04 09:08:30

因爲你用position: absolute;跨度將被視爲一個塊元素，position: absolute;是沒用的，你可以用display: inline-block;取代它，希望它可以幫助

來源

2014-12-04 08:29:23 webon

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; 
}

請讓我知道，如果這也幫助你的情況。

來源

2014-12-04 09:01:23 Leonidas

在錨標記中居中顯示bg圖像的跨度

回答

相關問題