如何在不同的浏览器中使用填充？

Question

我在使用填充时有一些奇怪的行为。

我有一个div作为包装器。这个包装器的两侧有25px的填充：

.wrapper #header #navline #log form .small {
    height: 25px;
    width: 180px;
    padding: 5px 25px;
}

在该包装器中我有一个带有以下css的输入字段：

input[type="text"],[type="password"] {
    font-size: 10px;
    width: 180px;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
    padding-right: 5px;
    outline:none;
}

和错误类：

input.error {
    background-image: url(../images/error.png);
    background-repeat:no-repeat;
    background-position: 160px 50%;
    width: 165px;
    padding-left: 5px;
    padding-right: 20px;
    position: absolute;
    z-index: 3;
}

所以我通过正确的方式设置它会变得疯狂。问题是chrome / safari和Firefox似乎在处理填充属性方面有所不同。例如，当在chrome / safari中保留height属性时，会在输入字段中自动添加填充顶部/底部。在Firefox中，输入字段有不同的高度。显示图片：

火狐：

铬：

主要问题是我想将输入字段置于包装器div中。输入的宽度应为180px。这意味着左侧各有25px。文本填充也是每边5px。因此，当使用填充属性时，输入字段的宽度是宽度减去填充。所以这将是第一个问题。当使用pading-left和padding-right 5px时，这等于180px（宽度输入字段）减去10px（填充）或填充0px是因为左侧+ 5px和右侧-5px？那么输入字段的正确宽度是什么？

第二个问题是关于错误类。在那里我将添加一张图片，并希望将右手填充从5px增加到20px。即使在这里，问题是输入字段的宽度是什么？我认为背后的逻辑是18​​0px减去+ 5px左，-20px将是165px？

第三个问题：我尝试了所有方法，但每个浏览器的结果都不同。我的逻辑背后是否有失败，因为填充应该是填充还是不填充？

Answer 1

为每个具有填充的元素添加css3框大小。它将解决问题。

 .text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}