Question

我在CSS中编写了一个button类。它主要显示块，添加一些样式等。每当我将类添加到a标签时，它工作正常 - 一个标签跨越其容器的整个宽度，如display:block应该... ，当我将button课程添加到input按钮时，Chrome，Safari和Firefox都会添加margin-right: 3px ...

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

我尝试在我的CSS中将margin: 0 !important;和/或margin-right: 0 !important添加到我的button类，但浏览器STILL呈现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>元素，这样更可靠。

Answer 2

如果你添加

width:100%;

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

CSS样式提交像href标签

2 个答案: