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 element的HTML5定义，它不能包含“交互式后代”，而input元素根据定义是交互式的。因此标记无效。所有赌注都已关闭。设置嵌套规则以避免事件处理中的复杂化。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

请你这样试试..

HTML 5 <a> download attribute not working on Firefox Mozilla?</a>

2 个答案: