浏览器中的输入行为

Question

如何在每个浏览器中使输入看起来都一样？

如何在每个浏览器中使按钮或输入看起来都一样？在firefox中，填充的行为与ie和chrome

不同

input.btn {
    border:1px solid #23458c;
    background:url('gfx/layout.btn_bg.png');
    color:#f0f5fa;
    font-weight:bold;
    margin-right:6px;
    padding:1px 5px 2px 5px;
    [if Gecko] padding:0px 5px 1px 5px;
    cursor:pointer;
}

修改

input.btn {
    border:1px solid #23458c;
    background:url('gfx/layout.btn_bg.png');
    color:#f0f5fa;
    font-weight:bold;
    margin-right:6px;
    padding:1px 6px 2px 6px;
    cursor:pointer;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

Answer 1

Firefox为它的点缀焦点效果添加了一些内部填充，您可能需要删除它。

input.btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}

Answer 2

这可能是由于不同浏览器处理表单元素的方式不同。您可以尝试添加：

-moz-box-sizing: content-box; /* or border-box */
-webkit-box-sizing: content-box;
box-sizing: content-box;

按钮的CSS样式，这应该强制所有浏览器使用相同的盒子模型，之后填充规则应该应用相同的跨浏览器。