样式 INPUT["Text"] vs DIV - 输入稍大

【问题标题】：Styling INPUT["Text"] vs DIV - Input is slightly Bigger样式 INPUT["Text"] vs DIV - 输入稍大
【发布时间】：2015-02-03 00:47:40
【问题描述】：

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

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

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

编辑：我不能简单地偏移一个像素。该设计使用 VW 单位，这是一种“响应式”CSS3 测量单位。 1VW = 视口宽度的 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;
}

【问题讨论】：

您应该指定font-family。目前它们是不同的。
实际上，这些框将使用不同的字体系列
好吧，继续。 ;)

标签： html css input

【解决方案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)

【讨论】：

我没有指定，但它的宽度和高度都较小。这将解决高度，您对宽度有什么想法吗？
刚刚看了你的 ypdated 例子，看起来很棒。谢谢！