如何将CSS宽度应用于Firefox上的提交输入？

Question

我将相同的宽度应用于锚点和提交输入。锚看起来正确，但提交输入的宽度太小。该问题仅在Firefox中出现。 Chrome很好。

浏览器

HTML

<a>Save</a>
<input type="submit" value="save" />

CSS

a,
input {
   display: block;
   width: 5em;
   text-align: center;
   font-size: 1.4em;
   padding: 0.6em 2em;

   /* hack to get the width to work on Chrome */
   box-sizing: content-box; 
}

Answer 1

我在Chrome中获得相同的效果。我不确定为什么，但看起来padding-right没有应用于input元素。你应该如何解决这个问题取决于你具体的情况，我不知道该怎么回答。希望了解问题的直接原因就足够了。

修改
有关他的解决方案，请参阅OP对此帖的评论。使它在FF中工作所需的只是-moz-border-box: content-box

Answer 2

尝试使用inline-block而不是block

a,
input {
   display: inline-block;
   width: 5em;
   text-align: center;
   font-size: 1.4em;
   padding: 0.6em 2em;
}

Answer 3

尝试添加CSS重置，看起来每个元素的默认宽度/填充在这里发挥作用。

a，输入{width：0;填充：0; margin：0;}

Answer 4

我认为您的错误在于您使用em来表示宽度或填充等尺寸 有很多文章为什么鼓励使用em作为font-size，但是你不应该将它们用于大小，填充，边距等。如果你想让你的布局“灵活”，请使用{ {1}}而是。其他我坚持%。