html - CSS 样式提交像 href 标签

Question

我有一个用 CSS 编写的 button 类。它基本上显示 block ，添加一些样式等。每当我将类添加到 a 标签时，它工作正常 - a 标签跨越其容器的整个宽度，如 display:block 应该做...但是，当我将 button 类添加到 input 按钮时，Chrome、Safari 和 Firefox 都添加了 margin-right: 3px...

我在 Chrome 和 Safari 中都使用了 DOM 检查器，它不应该在任何地方添加额外的 3px 填充。

我尝试将 margin: 0 !important; 和/或 margin-right: 0 !important 添加到我的 CSS 中的 button 类, 但浏览器仍然呈现 3px 的右边距!

这是一个已知问题吗，是否有基于 CSS 的解决方案(即不是 jQuery/javascript)

代码如下:

.button {
  position: relative;
  display: block;
  margin: 0;
  border: 1px solid #369;
  color: #fff;
  font-weight: bold;
  padding: 11px 20px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  cursor: hand;
  cursor: pointer;
}

Answer 1

是的，<input>元素有许多奇怪之处。尽可能使用 <button>元素，这更可靠。