HTML按钮内嵌图片alt属性不生效、边框无法去除问题咨询

图片悬浮不显示提示的原因 #

• alt 属性的核心作用是图片加载失败时的替代展示文本，同时用于屏幕阅读器识别图片内容，本身不具备鼠标悬浮弹出提示的能力。
• 要实现预期的悬浮提示效果，需要给 <img> 标签或者外层 <button> 标签添加 title 属性，更推荐给按钮加title，只要鼠标悬浮在按钮任意区域都会触发提示，修改示例如下：

<button class="create" type="submit" id="retry-btn" onclick="retryJournal()" title="Retry">
  <img alt="Retry" src="styles/default/images/arrow-clock.svg"/>
</button>

按钮无法去除边框的解决方法 #

• border="0" 不属于 <button> 标签的标准原生属性，该属性仅对 <img>、<table> 等早期HTML元素生效，按钮的默认边框由浏览器内置CSS样式控制，必须通过CSS规则修改。
• 正确去除边框的两种实现方式：
  • 内联样式直接写在标签上：

    <button class="create" type="submit" style="border: none;" id="retry-btn" onclick="retryJournal()">
    

  • 写在CSS样式表中关联按钮类：

    .create {
      border: none;
      /* 若需要同时去掉按钮点击时的默认高亮轮廓，可新增下面的规则 */
      outline: none;
    }
    

提示：如果完全移除了outline属性，建议额外自定义按钮的焦点状态样式，避免键盘导航用户无法识别当前选中的元素，保证可访问性。

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