带有html5的图像按钮

Question

我正在尝试制作图像按钮.我正在使用/学习html5和jquery mobile.这是我的示例代码:

<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />

显示图像,但输入类型不显示图像.我做错了什么？

Answer 1

<input type="image" src="img/beer.png" />意在收集坐标.如果要将其用作提交按钮,则必须添加onsubmit-event,例如

<input type="image" src="img/beer.png" onsubmit="submit();" />

但你应该使用<button>-element,这更灵活.它可以包含文本,图像或两者:

<button type="submit" name="beer" value="beer_btn_was_clicked">
  Here's some optinal text
  <p> you can even put it in a paragraph! </p>

  And you don't even need JavaScript!

  <img src="img/beer.png" />
</button>

编辑(2016-02-12)

截至今天*,上述示例不被视为100%有效,因为 - <p>元素中不允许使用 - <button>元素.

根据MDN HTML元素引用,<button>-element中唯一允许的内容类别是所谓的Phrasing内容:

短语内容定义文本及其包含的标记.短语内容的运行构成段落.

属于这一类的元素是<abbr>,<audio>,<b>,<bdo>,<br>,<button>,<canvas>,<cite>,<code>,<command>,<datalist>,<dfn>,<em>,<embed>,<i>,<iframe>,<img>,<input>,<kbd>,<keygen>,<label>,<mark>,<math>,<meter>,<noscript>,<object>,<output>,<progress>,<q>,<ruby>,<samp>,<script>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<svg>,<textarea>,<time>,<var>,<video>,<wbr>和纯文本(不仅包括空格字符).

其他一些元素属于此类别,但仅在满足特定条件时:

• <a>,如果它只包含措辞内容
• <area>,如果它是元素的后代
• <del>,如果它只包含措辞内容
• <ins>,如果它只包含措辞内容
• <link>,如果存在itemprop属性
• <map>,如果它只包含措辞内容
• <meta>,如果存在itemprop属性

_{*今天是我读到的,而不是在引入变更时}

Answer 2

http://jsfiddle.net/cyB7B/

这对我有用......你还有其他可能干扰的代码吗？也许是CSS？