HTML/CSS实现中关闭按钮显示空白方块但功能正常问题排查

实现HTML和CSS时，关闭按钮显示为空白方块，方块内无内容，但按钮的关闭功能正常。相关代码及效果如下：

HTML代码 #

<div class="alert-dismissible">
    <strong>Success!</strong> <?php echo $_SESSION['status2'];?>
    <button title="alert" type="button" class="close" data-bs-dismiss="alert"></button>
</div>

CSS代码 #

.alert {
  position: absolute;
  top: 28px;
  right: 485px;
  width: 50px;
  padding: 1.25rem 1rem;
}

.alert-dismissible .close {
  position: absolute;
  top: -13px;
  right: 3px;
  z-index: 2;
  padding: 1.25rem 1rem;
}

效果展示 #

解决方法 #

1. 添加关闭图标内容 #

按钮当前是空标签，没有任何显示内容，需在<button>标签内添加关闭符号，推荐使用HTML实体×（对应×符号），修改后的按钮代码：

<button title="alert" type="button" class="close" data-bs-dismiss="alert">&times;</button>

2. 调整CSS样式优化显示 #

当前.close类的内边距过大，且未设置字体相关样式，可调整CSS让符号显示更合理：

.alert-dismissible .close {
  position: absolute;
  top: -13px;
  right: 3px;
  z-index: 2;
  padding: 0.5rem 0.75rem; /* 减小内边距 */
  font-size: 1.25rem; /* 设置合适字体大小 */
  border: none; /* 去掉默认边框 */
  background: transparent; /* 透明背景 */
  cursor: pointer; /* 鼠标悬停显示指针 */
}

3. 确保Bootstrap资源正确引入 #

如果使用Bootstrap的alert-dismissible和close组件，需确保已正确引入Bootstrap的CSS文件，它会默认提供关闭按钮的样式逻辑。

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