Question

我以前常常把它当作按钮：

<img class="left" src="<?php echo $this->webroot."img/arrowleft.png";?>" width="32" height="31" alt="Arrow left button" />

现在我要使用这个：

<img class="left" />

然后使用CSS，我可以放置背景图像，定义按钮的大小，并使用CSS 100％完成我想做的所有事情。但是我想知道是否可以接受<img>仅具有一个类并且完全没有属性，并且根据适当的HTML编码标准。

Answer 1

来自the spec：

必须存在src属性，并且该属性必须包含有效的非空URL，该URL可能由引用非分页或脚本化非交互式，可选动画图像资源的空格包围。

Answer 2

我所做的是使用<span>元素：

<span class="left"></span>
<span class="right"></span>

然后，通过提供背景，相应的大小等，使它们与CSS一起用作按钮。因此，我使用<span>而不是<img>，并且一切方式都与以前完全一样。 / p>

更新1

在对这个答案的第一条评论中遵循@sean的建议，它发生了我认为会发生的事情：

看到边界。是的，我可以使用CSS删除边框，但是有时我不喜欢那些默认行为，因为如果在某些浏览器中看起来没有边框，那很好，但是只有某些浏览器默认添加了边框，有时我不知道具体是哪些浏览器添加了边框，但总的来说，我认为仅边框应该是外观和样式方面需要担心的事情。

更新2

此外，请参见左箭头按钮上的虚线。这些是在我单击左箭头按钮后出现的，这仅在Firefox上发生。幸运的是，我可以应用在How to remove Firefox's dotted outline on BUTTONS as well as links?上找到的答案：

button::-moz-focus-inner {
    border: 0;
}