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 element的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>

你可以试试这样吗..