Css 浏览器中的输入行为

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

如何使每个浏览器中的按钮或输入看起来都一样？在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;
}

编辑

---

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

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

---

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

Firefox为其虚线焦点效果添加了一些内部填充，您可能需要删除这些填充

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

---

当您删除这一行时，问题大概已经解决了。[如果是壁虎]填充：0px 5px 1px 5px；我假设这是他向我们展示的方式，如果浏览器渲染引擎是Gecko，他希望使用填充。不管怎样，我希望它不是在他真正的CSS中。@david。。是的。。我想这样做我的回答对你有用吗？它还是不能像你想的那样工作吗？我不能让它工作。。。我只需要在css文件的底部添加这三行？如果您将这些行添加到

input

元素的css声明中，它应该可以工作。除非有其他事情发生。@clarkk，你能发布一个复制这种行为的帖子吗？这是可行的，但是你看不到哪个输入有焦点。。你怎么能在所有浏览器中添加比Firefox更多的填充呢？我不知道，你可能不得不使用CSS黑客。最好只添加您自己的焦点样式。很好的解决方案。。不知道：焦点存在：）

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