文本修饰不在Opera中的<input type =“button”/>上工作

Question

给出以下代码：

HTML：

<input id="myButton" type="button" value="Click me" />

CSS：

#myButton{
    text-decoration: underline;
    padding: 10px;
}

您可以在jsfiddle上看到这是一个实例。

我想实现按钮内的文字带下划线。它在IE9，Chrome 21，Firefox 14和Safari 5.1.5中运行良好，但它在当前的Opera 12中不起作用。

我尝试了this question的建议，但Opera中的按钮内部仍然没有带下划线的文字。如何在浏览器中实现这一目标？

修改

我想使用仅限CSS的解决方案。我有很多表单，其中一些是由Javascript生成的，所以要修改所有这些的HTML / Javascript只是为了修复Opera上的这个问题。

Answer 1

你可以试试这个：

<button id="test"><span>Test</span></button>

使用以下CSS样式：

#test{ padding: 10px; }
#test span{ text-decoration: underline; }

在最新的Opera中为我工作。

此致 索伦

Answer 2

你不能将文本修饰和直通应用于xhtml strict下的input type =“button”。它在html 4.01过渡下运行，但不是xhtml strict。