CSS 样式提交类似于 href 标签
我有一个用 CSS 编写的 button 类。它本质上显示块，添加一些样式等。每当我将类添加到 a 标记时，它都工作正常 - a 标记跨越其容器的整个宽度，如 display:block code> 应该可以...但是，当我将 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;
}
I have a button class that I wrote in CSS. It essentially displays block, adds some styles, etc. Whenever I add the class to a tags, it works fine - the a tag spans the entire width of its container like display:block should do... However, when I add the button class to an input button, Chrome, Safari, and Firefox all add a margin-right: 3px...
I've used the DOM inspector in both Chrome and Safari and NO WHERE should it be adding a extra 3px padding.
I tried adding margin: 0 !important; and/or margin-right: 0 !important to my button class in my CSS, but the browser STILL renders a 3px right margin!
Is this a known issue, and is there a CSS-based solution (i.e. not jQuery/javascript)
CODE FOLLOWS:
.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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
是的，
元素有很多奇怪之处。如果可能，请改用Yes, the
<input>element has a number of oddities. Where possible, use the<button>element instead, that's a lot more reliable.如果添加
到现有代码中。它将填充容器并消除随机的 3px 右边距。
if you add
to your existing code.It will fill the container and get rid of the random 3px right-margin.