这是使用CSS或HTML标记脏乱操作的充分妥协吗？

Question

我想要一个带有渐变的按钮和一个表示按钮功能目的的图标。这种方法是否使用HTML来达到这个要求？或者这是HTML的不良滥用？

装饰器负责按钮外观，图标选择器显示保存图标。

span.button.decorator { 
    background-image:url("gradient.png"); 
    background-repeat:repeat-x; 
} 

span.button.decorator input.icon { 
    background-image:url("icon-sprite.png"); 
} 

span.button.decorator input.icon_save { 
    background-position: 0 1500px; 
} 

CSS指令增强了带有渐变效果的按钮，并照顾了按钮图标。

<span class="button decorator"> 
    <input type="button" value="Save" class="icon icon_save" /> 
</span> 

是否有更好的解决方案？谢谢。

---

今天了解了<button />。有关更多信息，请参阅“计算器”问题HTML - <button> vs. <input type="button" />。

Answer 1

我会以这个为出发点自己：

<button> 
    <img alt="Save" src="save.png" /> 
</button>