Question

我在让Firefox和Chrome正确显示一小部分CSS方面遇到了一些麻烦。

我尽可能地将其分解并创建了一个Codepen来说明问题。

在Firefox中查看时，所有内容都按预期显示（垂直居中）。使用Chrome时，标签略高，只有一到两个像素。

到目前为止我尝试的所有内容（调整填充，更改浮动，添加内联块，添加边距）将始终在两个浏览器中的一个中显示不正确。

我想知道的是问题的根本原因是什么。我使用CSS重置（normalise.css），它被添加到Pen。

<div class="editbox">
    <div class="object objecthover edit">
        <label class="t">Edit</label>
    </div>
    <div class="object objecthover lock">
        <label class="text_label">Lock</label>
        <label class="gems index-gems">50 </label>
    </div>
</div>

.editbox {
    position: absolute;
    height: 60px;
    width: 192px;
    background-color: #516580;
    padding-top: 12px;
    left: 0px;
}
* {
    box-sizing: border-box;
}

.edit, .save {
    min-width: 50px;
    padding: 7px;
}
.editbox label {
    -moz-user-select: none;
    color: #FFF;
    height: 35px;
}
.editbox .object {
    position: relative;
    border: 2px solid #FFF;
    display: inline-block;
    padding: 4px;
    margin-left: 4px;
    height: 35px;
    text-align: center;
}
div.lock {
    width: 130px;
    height: 35px;
    padding: 5px 1px 5px 0px;
}
.lock .text_label {
    display: inline-block;
}
.editbox label {
    -moz-user-select: none;
    color: #FFF;
    height: 35px;
}
.lock label.index-gems {
    padding: 0px;
}
label.index-gems {
    color: #FFF;
    height: 27px;
    padding: 4px;
}
.editbox .lock::after, .editbox .make_bid::after {
    content: "";
    position: absolute;
    top: 33px;
    height: 0px;
    width: 0px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #FFF;
}

Answer 1

尝试使用填充垂直对齐文本是不可靠的。

有两种更好的方法

使用display: table-cell和vertical-align: middle
将元素的line-height设置为与height相同。

第一个选项处理多行文本，而第二个选项不处理，但引入表格单元格可能导致其他布局问题。如果您只处理一行文本，第二个选项更简单。

以下是使用line-height垂直对齐文字的示例：

div {
  display:inline-block;
  border:1px solid #abc;
}
.a {
  line-height: 20px;
  height: 20px;
}
.b {
  line-height: 30px;
  height: 30px;
}
.c {
  line-height: 40px;
  height: 40px;
}
.d {
  line-height: 50px;
  height: 50px;
}
.e {
  line-height: 60px;
  height: 60px;
}

<div class="a">text</div>
<div class="b">text</div>
<div class="c">text</div>
<div class="d">text</div>
<div class="e">text</div>

Firefox和Chrome之间的CSS差异 - 垂直高度

1 个答案: