我发现 kellum 方法并不真正适用于 html 按钮元素。更准确地说,它可以工作,但需要更多的文本缩进。回顾一下,这是技术:
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
对于按钮元素,我必须将文本缩进更多,比如 200%,这取决于,它似乎没有特定的规则,但肯定超过 100%。为什么?
最佳答案
button
等元素具有内在填充。
删除它,您将获得一致的结果。此外,尽可能使用重置 css 为您提供一个干净的平台来开始您的样式。适当的 box-sizing
也很重要。
这就是原因,人们通常会谨慎行事并使用远超过 100% 的缩进。
检查此代码段:(尝试从 *
中删除填充)
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
button, span {
width: 120px;
height: 32px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: inline-block;
border: 1px solid gray;
vertical-align: middle;
}
<button>Button</button>
<span>Span</span>
关于html - css 图片替换 : why the kellum method doesn't work with button elements?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26992552/