css - 文本装饰在 Opera 中不起作用

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 中无法运行。

我尝试了这个问题的建议，但 Opera 的按钮内仍然没有带下划线的文本。如何在该浏览器中实现这一点？

编辑：

我想使用纯 CSS 解决方案。我有很多表单，其中一些是由 Javascript 生成的，因此为了解决 Opera 上的这个问题而更改所有这些的 HTML/Javascript 将花费太多精力。

score 1 · Accepted Answer

你可以试试这个：

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

使用以下 CSS 样式：

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

在最新的 Opera 中为我工作。

问候索伦

score 0 · Accepted Answer

您不能将文本装饰和换行应用于 xhtml 严格下的输入 type="button"。它适用于 html 4.01 过渡，但不适用于 xhtml 严格。

2 回答 2