日历单元格添加右下角图标后，Chrome正常显示但IE/Firefox边框不显示

我之前处理过不少跨浏览器的表格样式兼容性问题，你的这个情况大概率是因为图标布局导致表格单元格的尺寸计算或者边框渲染出了异常——Chrome对这种场景的容错性更好，但IE和Firefox会严格遵循渲染规则。给你几个针对性的解决思路：

• 修复浮动/定位导致的单元格高度塌陷
  如果你的图标用了float: right定位到右下角，IE和Firefox可能无法正确计算单元格高度，进而导致边框“消失”。可以给单元格添加清除浮动的伪元素，同时设置最小高度：

  .calendar-cell {
    border: 1px solid #ddd;
    min-height: 70px; /* 根据你的日历单元格大小调整 */
  }
  .calendar-cell::after {
    content: "";
    display: table;
    clear: both;
  }
  

• 改用绝对定位并预留内边距
  要是用绝对定位放置图标，记得给单元格设置position: relative，同时添加右侧内边距，避免图标覆盖边框：

  .calendar-cell {
    border: 1px solid #ddd;
    position: relative;
    padding-right: 22px; /* 图标宽度+2px间距，防止压到边框 */
    min-height: 70px;
  }
  .calendar-icon {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
  }
  

• 调整表格边框合并规则
  检查你的表格是否设置了border-collapse: collapse，这个属性在IE和Firefox中可能和内部浮动元素产生冲突。可以改成border-collapse: separate并消除单元格间距：

  .calendar-table {
    border-collapse: separate;
    border-spacing: 0; /* 保持单元格紧密排列 */
  }
  

• 强制单元格渲染边框（临时测试用）
  极端情况下，可以给单元格边框加上!important（不推荐滥用，但临时排查问题有用），或者用outline属性作为替代（注意outline和border的显示逻辑略有不同）：

  .calendar-cell {
    border: 1px solid #ddd !important;
  }
  

你可以先试试前两种方法，这是最常见的解决方案，一般都能解决IE和Firefox的边框显示问题。

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