程序员经验分享-hwhale

2023-11-21

我在用着<button>以表单形式发出发布请求。我还设计了一个a.button完全就像<button>（我需要a.button制作一些 JS 的东西）。

该按钮有一些填充，固定高度。当我指定按钮 / a 的宽度时，它们看起来都一样。但是当我添加宽度时<button>它忽略填充。

我在 Chrome、Firefox 和 Opera 中遇到了这个问题，所以我想这不是渲染错误。也有同样的问题<input type="submit" />

这是基本的 CSS：

.button, button {
    margin: 0;
    display: inline-block;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    color: black;
    background: #ddd;
    font: 12px Verdana;
    padding: 40px; /* 40px, so you can see that it won't be rendered with width */
    text-align: center;
}

HTML：

<a href="#" class="button">Some text</a>
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
<a href="#" class="button" style="width:200px">Some text</a>
<button style="width:200px">Some text</button>

Fiddle: http://jsfiddle.net/9dtnz/

关于浏览器忽略填充的任何建议？ （使用高度时的顶部和底部/使用宽度时的左侧和右侧）。


很奇怪，我发现我的 Chrome 有一个box-sizing: border-box;输入元素的规则，因此填充包含在宽度中......

所以为了避免这种情况，只需指定box-sizing: content-box;（一些前缀可能是必要的）。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Rendering

width

padding