如何调整我的 CSS，以便 Firefox 在子标签宽度为 100% 时尊重填充？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
border-width: 1px;
border-style: solid;
border-color: black;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
height: 28px;
padding: 0 10px 0 10px;
max-width: 180px;
}
button > span {
width: 100%;
height: 100%;
white-space: nowrap;
}
.text {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
</style>
</head>
<button>
<span>
<span class="icon"></span><!-- This will push the text to the right when its shown -->
<span class="text">Button text that is really, really long</span>
</span>
</button>
</html>
上面的代码包含一个完整的 HTML 页面，可以将其复制/粘贴到文本编辑器中并在浏览器中呈现。我这里遇到的问题是，我需要文本填充 100% 可用宽度，同时尊重左侧和右侧 10px 的填充。此处显示的 CSS 适用于最新版本的 Chrome、Safari 和 IE。然而，在 Firefox（版本 7 和 8）中，填充不被考虑。
我知道如果我删除填充并将文本宽度更改为 95%，它看起来会很相似，但我希望尽可能避免这种情况。
请告知如何针对 Firefox 进行调整并继续在其他浏览器中正常工作。感谢您抽出时间。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
border-width: 1px;
border-style: solid;
border-color: black;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
height: 28px;
padding: 0 10px 0 10px;
max-width: 180px;
}
button > span {
width: 100%;
height: 100%;
white-space: nowrap;
}
.text {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
</style>
</head>
<button>
<span>
<span class="icon"></span><!-- This will push the text to the right when its shown -->
<span class="text">Button text that is really, really long</span>
</span>
</button>
</html>
The above code contains a full HTML page that can be copy/pasted into a text editor and rendered in your browser. The issue I have here is that I need the text to fill 100% available width while respecting the padding of 10px on the left and right side. The CSS shown here works for the latest versions of Chrome, Safari and IE. However, in Firefox (versions 7 and 8) the padding isn't being respected.
I understand that if I remove the padding and change the width of the text to 95% it will look similar but I am hoping to avoid that if possible.
Please advise on how this can be adjusted for Firefox and continue to work correctly in the other browsers. Thank you for your time.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不完全确定这是最好的方法，但它有效：
您的原始代码： http://jsbin.com/ ebinem
通过我的修复：http://jsbin.com/ebinem/2
I'm not completely sure that this is the best way, but it works:
Your original code: http://jsbin.com/ebinem
With my fix: http://jsbin.com/ebinem/2