iPhone浏览器中图片按钮出现白色透明框 其他端显示正常 是什么原因

问题原因 #

iOS端所有浏览器都强制使用WebKit内核，会默认给带有type="button"属性的元素、可点击的交互类元素添加内置默认样式：

• 你给<img>标签额外添加了不属于img原生属性的type="button"，触发了Safari的表单按钮默认样式规则，自动加上了半透明白色边框与背景
• 同时Safari默认给可点击元素加的点击高亮遮罩如果没有手动清除，也会出现类似的半透明外框效果

解决方法 #

你可以任选以下一种方案修复：

1. 删除多余属性：直接去掉<img>标签上的type="button"属性，img元素本身不需要该属性，直接绑定点击事件即可正常作为按钮使用
2. 添加样式重置规则：给.ctrlBtn类加上WebKit内核样式清除代码：

.ctrlBtn{
  height:50px;
  max-width:300px;
  /* 新增以下代码 */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

@media only screen and (max-width: 750px) {
  .ctrlBtn{
    height:32px;
    width:252px;
    padding:0;
  }
}

3. 使用语义化按钮结构：更规范的写法是将图片套在<button>标签内，同时重置button的默认样式，兼容性和可访问性更好：

<div class="row" id="ctrlBar">
  <div class="col-6">
    <div class="text-center">
      <button type="button" class="ctrl-btn-wrap" id="nextBtn">
        <img class="ctrlBtn" src="img/NextTry.png" onMouseOut="this.src='img/NextTry.png'" onMouseOver="this.src='img/NextTry_hover.png'" alt="重试"/>
      </button>
    </div>
  </div>
</div>

对应新增CSS：

.ctrl-btn-wrap {
  border: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ctrl-btn-wrap .ctrlBtn {
  display: block;
}

内容的提问来源于stack exchange，提问作者whitebear