浮動圖標在jsfiddle中正確對齊，但不在本地瀏覽器中

我在右端有一個帶有文本和倒三角形的下拉框。我在本地瀏覽器上看到一個問題，包括firefox & chrome，其中三角形對齊頂部。它看起來像，浮動圖標在jsfiddle中正確對齊，但不在本地瀏覽器中

當我的jsfiddle運行的代碼我沒有看到這樣的問題。檢查here ..

我使用line-height財產垂直調正，

.fa-caret-down{  
    line-height: 40px; 
} 

    .btn-text{ 
    line-height: 40px; 
    }

爲什麼我的本地瀏覽器的行爲不同？有沒有辦法將圖標移動到中間？

來源

2016-04-14 Madhavan Kumar

是不是默認字體line-height覆蓋你的40px一個？嘗試line-height: 40px !important;並檢查結果。如果沒有，則從檢查員張貼截圖並顯示此下拉屬性。

來源

2016-04-14 16:54:15

你是對的，男人......'fa-caret'行高被覆蓋.. –

很高興幫助;） –

我不知道爲什麼你的本地瀏覽器不顯示正確的設計。在我的Firefox中45.0.2一切都很好。

你是否確定你的代碼是平等的？

<html> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css"> 
<head> 
<style type="text/css"> 
body{ 
    background-color: #e3e4e5; 
} 
.drp-down-btn{ 
    margin: 20px; 
    height: 40px; 
    background-color: #fff; 
    display: inline-block; 
    padding: 4px; 
    width: 150px; 
} 
.fa-caret-down{  
    line-height: 40px; 
} 

    .btn-text{ 
    line-height: 40px; 
    } 
</style> 
</head> 
<body> 
<div class="drp-down-btn"> 
    <span class="btn-text"> My caption</span> 
    <i class="fa fa-lg fa-caret-down" style="vertical-align:baseline;float:right;"></i> 
</div> 

</body> 
</html>

來源

2016-04-14 16:56:00

浮動圖標在jsfiddle中正確對齊，但不在本地瀏覽器中

回答

相關問題