HTML 5 <a> 下载属性在 Firefox Mozilla 上不起作用？

Question

嗨，我只想让用户点击按钮下载图像。我在我的项目中使用了标记及其在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>

Answer 2

<div class="text-wrap"><img src="your img.jpg" alt="">
<a href="download.jpg" class="myButton" download="img name" title="Download">
    <img src="/path/to/image" alt="Download">
</a></div>

你能这样试试吗。。