标签在Mozilla中对齐

Question

在Chrome中，我的标签已正确对齐，但在Mozilla和IE中没有。我该如何解决这个问题？

HTML：

<div >              
    <label >Domaine d'activité</label>                      
</div>

CSS：

label {
    vertical-align: top;
}
label:BEFORE {
    content: '';
    display: inline-block;
    background-color: #435a8b;
    height: 20px;
    width: 20px;
    margin: 0 4px 6px 0;
}

这是fiddle

Answer 1

您必须将vertical-align: middle;添加到label:before

你可以看到小提琴：

http://jsfiddle.net/jfHrT/

Answer 2

您无需在vertical-align: top;上使用label，只需在:before元素上定义它即可。这是 DEMO 。

label {
    /*vertical-align: top;*/ /*Not required */
}
label:before {
    content: '';
    display: inline-block;
    vertical-align: top;
    background-color: #435a8b;
    height: 20px;
    width: 20px;
    margin: 0 4px 0 0;
}