浮动图标在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中正确对齐，但不在本地浏览器中

回答

相关问题