Question

我不知道为什么这个元素内部输入字段会得到不同的渲染。这是一个截图（它应该在中间，就像在Firefox上一样）。

http://imageshack.us/photo/my-images/842/lasw.png/

该元素存在于3个div中。

1. Container div (position relative)
2. Input field (position absolute; top: 3px; left 0px;)
3. Label (position absolute; top: 3px; left 0px;)

以下是全局样式（重置和定义字体样式）

label, input, textarea, select, button{
    font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 20px;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video{
    margin: 0px;
    padding: 0px;
    border: 0px;
    outline: 0px;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

这是容器div上的样式：

.textbox{
    position: relative;
    padding: 3px;
    border-image: initial;
    background: #FFFFFF;
    -moz-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #B3B3B3;
    font-size: 13px;
    line-height: 20px;
}

这是输入字段上的样式，占位符：

.textboxInput, .textboxLabel{
    position: absolute;
    top: 3px;
    left: 0px;
}

以下是输入字段的样式：

.textboxInput{
    background: none transparent !important;
    -webkit-appearance: none !important;
    border: 0px !important;
    outline: 0px !important;
}

以下是标签的样式：

.textboxLabel{
    font-weight: 500;
}

我希望有人知道为什么它会以不同的方式呈现。

问题不在于字体权重，Firefox和Chrome的差异是2像素是什么造成的呢？

Answer 1

在Firefox中添加了

padding-top和padding-bottom，将其删除并使其完美运行。

html错误的位置

1 个答案: