HTML 5 <a>下载属性无法在Firefox Mozilla上运行？

Question

大家好我只想让用户点击按钮下载图像.我在我的项目中使用了tag,并在html5中提供了它的下载属性.我的以下代码在Chrome上工作正常,但在Firefox Mozilla中,当我点击按钮时它只是在指定的路径上重定向我.请告诉我出了什么问题.

 <div style="display:inline-block; position:relative; ">
      <img src="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" title="" alt="">
         <a href="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" download="image.png">
            <input type="button" style="position:absolute;bottom:0;right:0; " value="Download">
        </a>
</div>

提前致谢.

Answer 1

根据a元素的HTML5定义,它不能包含"交互式后代",并且input元素按定义是交互式的.因此标记无效.所有赌注都已关闭.设置嵌套规则以避免事件处理中的复杂化.

因此,如果你想拥有download属性和一些按钮外观,你需要只使用一个a元素并将其设置为看起来像一个按钮.这是一个草图,根据您对按钮样式的偏好进行调整:

.dbutton {
  position:absolute;
  bottom:0;
  right:0;
  color: #000;
  background: #ddd;
  border: #333 outset 2px;
  border-radius: 3px;
  text-decoration: none;
  padding: 0.1em 0.2em;
  font: 90% sans-serif;
}

 <div style="display:inline-block; position:relative; ">
      <img src="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" title="" alt="">
         <a href="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" download="image.png"
         class="dbutton">Download</a>
</div>