CSS 样式像 href 标签一样提交答案

【问题标题】：CSS style submit like href tagCSS 样式像 href 标签一样提交
【发布时间】：2011-02-19 18:41:39
【问题描述】：

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

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

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

这是一个已知问题吗，是否有基于 CSS 的解决方案（即 not 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;
}

【问题讨论】：

您能帮我们粘贴您的 CSS 吗？
查看我更新的问题。
你可以跳过cursor: hand; - 你会立即用cursor: pointer;覆盖它
@seth.vargo：Internet Explorer 从大约十年前发布的第 6 版开始就支持 cursor: pointer。
您是在告诉我，为 CSS 规则分配一个值，然后再分配一个值会给您两个？我告诉你，你将它设置为手，然后用指针覆盖它。此外，唯一不支持指针的浏览器是 IE 5.5，请参阅quirksmode。如果您需要支持 IE 5.5，我建议您遇到比多行 CSS 更糟糕的问题。另外，请注意，如果您正在尝试支持 IE 5.5，那么这两行的顺序是错误的。先赋值指针，再赋值。

标签： html css input href

【解决方案1】：

是的，<input> 元素有很多奇怪之处。如果可能，请改用<button> 元素，这样更可靠。

【讨论】：

这会消除边距问题吗？
@seth.vargo，不。尝试为表单元素设置样式是一件很痛苦的事情。
grrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

【解决方案2】：

如果你添加

width:100%;

到您现有的代码。它将填充容器并摆脱随机的 3px 右边距。

【讨论】：

对...然后元素被推出容器，因为它们有填充
好的，我正在尝试模仿，但没有运气。任何机会你都可以放置容器 CSS，这样我就可以更好地了解发生了什么。