html - 样式输入 ["Text"] 与 DIV - 输入稍大

Question

我正在尝试设置 Input 标签和 DIV 标签的样式。 DIV 必须位于输入下方，并且它们需要具有相同的宽度。但是，无论我做什么 - DIV 都比 INPUT 小一个像素。

这不应该发生，特别是如果(在这个例子中)两个对象共享同一个 CSS 类。我知道如何编写 CSS。我只是不知道是什么导致输入框稍微变大。

我在这里玩弄过:http://jsfiddle.net/r8pty4a8/

编辑:我不能简单地偏移一个像素。该设计使用 VW 单位，这是一个“响应式”CSS3 测量单位。 1VW = 视口(viewport)宽度的 1%。

<div style="width: 100%; position: relative">
    <input type="text" class="MyStyle" />
    <div class="MyStyle">Foo</div>
</div>

.MyStyle
{
    height: 6.09375vw;
    line-height: 6.09375vw;
    font-size: 3.05vw;
    padding-left: 2.013vw;
    width: 80vw;
    border: .4vw solid red;
    border-top-left-radius: .3vw;
    border-top-right-radius: .3vw;
    clear: both;
}

Answer 1

您忘记考虑 input 元素上的默认 padding-top/padding-bottom。

在 Chrome 中，元素的默认 padding-top/padding-bottom 为 1px。

Updated Example - 两个元素现在具有相同的高度。

.MyStyle {
    padding-top: 0;
    padding-bottom: 0;
    height: 6.09375vw;
    line-height: 6.09375vw;
    font-size: 3.05vw;
    padding-left: 2.013vw;
    width: 80vw;
    border: .4vw solid red;
    border-top-left-radius: .3vw;
    border-top-right-radius: .3vw;
    clear: both;
}

您也可以使用简写 - padding: 0 0 0 2.013vw。 (example)