IE 11与Safari浏览器CSS样式兼容问题求助

嘿，我帮你搞定这个跨浏览器兼容的坑～结合你给出的代码片段，猜你应该是想用这个伪元素做下拉菜单的向上三角箭头对吧？IE11和Safari在伪元素的border形状渲染上确实有不少小问题，我整理了可直接运行的修复方案：

核心问题点及对应修复 #

• IE11对伪元素的display属性要求严格：默认伪元素是inline状态，没法正确渲染带border的形状，必须显式设置为block或inline-block
• 旧版Safari不喜欢border简写歧义：最好把每个border的宽度、样式、颜色都明确写全，别依赖继承或简写
• 绝对定位的依赖条件：伪元素用了position: absolute，父元素.lap_drop_dwn必须设置position: relative，否则IE11和Safari会把箭头定位到奇怪的位置

修复后的完整可运行代码 #

/* 首先给父元素添加相对定位，确保伪元素基于它定位 */
.lap_drop_dwn {
  position: relative;
  /* 保留你原来的其他样式 */
}

.lap_drop_dwn:before {
  content: "";
  position: absolute;
  right: 31px;
  top: -10px;
  /* 显式设置display，IE11必备 */
  display: block;
  width: 0;
  height: 0;
  /* 明确每个border的属性，避免Safari解析歧义 */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffffff; /* 替换成你需要的箭头颜色 */
  /* 可选：加z-index确保箭头在下拉菜单上方，避免被遮挡 */
  z-index: 1;
}

额外测试提示 #

• 如果你的代码里用了CSS变量（比如var(--arrow-color)），IE11完全不支持，要替换成具体的颜色值
• 检查父元素有没有设置overflow: hidden，会直接把箭头切掉，IE11和Safari对overflow的判断比Chrome更严格
• 旧版Safari（比如Safari 9及以下）不需要给伪元素加-webkit-前缀，这个属性已经兼容很久了

直接替换这段代码试试，应该就能解决两个浏览器的显示问题啦～

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