Question

我有一个简单的按钮，只有一个css风格，如下所示：

<button style="text-decoration:underline">That's a button</button>

Firebug告诉我，在计算出的样式选项卡中，确实将文本修饰设置为下划线。但是Button-text没有加下划线，为什么不呢？显然这是Firefox（3.6）的一个问题，因为Chrome和IE都强调按钮文字。是否有一些针对Firefox的CSS解决方法，或者我是否必须将按钮放在具有文本修饰样式的外部div中？

Answer 1

在网上进行的更多研究已经产生了更优雅的解决方法，并使我确信这可能是一个“错误”。它几乎是FireFox的'hasLayout'类型（不是真的，但行为类似）。如果您添加以下任何内容，则会显示下划线：position: absolute，display: block，display: inline-block，float: left（或右侧）。所以：

<button style="text-decoration:underline; display: inline-block;">That's a button</button>

Answer 2

它似乎确实是一个“错误”（我实际上并不知道网络标准对button元素的评价，所以我不愿意将其称为“错误”或仅仅是浏览器解释的差异）。这有效，但与您的div包装解决方案实际上并没有太大区别：

<button ><span style="text-decoration:underline">That's a button</span></button>

文本修饰不适用于Firefox中的按钮元素，解决方法？

2 个答案: