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

时间:2010-07-13 13:24:59

标签: css firefox button

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

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

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

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

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

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