Div出现非预期CSS边框样式问题排查求助

一、莫名蓝色边框的解决 #

你设置border:none无效，大概率是浏览器的**默认聚焦轮廓（outline）**而非border样式——浏览器会给获得焦点的元素添加蓝色outline以实现无障碍提示。可以按以下方式处理：

• 直接移除轮廓：

#editing_options *:focus {
  outline: none;
}

• 替换为自定义聚焦样式（更推荐，兼顾无障碍体验）：

#editing_options *:focus {
  outline: 2px solid #your-custom-color;
  outline-offset: 2px;
}

如果是#editing_options容器本身出现轮廓，直接给容器添加样式：

#editing_options {
  outline: none;
}

二、内部第二个链接被挤压的修复 #

链接被挤压通常是布局逻辑冲突导致的，常见原因及解决方法：

1. Flex布局自动收缩：若#editing_options使用flex布局，子元素默认flex-shrink:1会自动收缩挤占空间。给链接添加以下样式禁用收缩：

#editing_options a {
  flex-shrink: 0;
  /* 或设置最小宽度确保内容完整显示 */
  min-width: fit-content;
}

2. 盒模型空间挤占：检查父容器或链接的padding/margin是否挤占了可用空间，可统一重置盒模型：

#editing_options, #editing_options a {
  box-sizing: border-box;
}

3. 文本溢出强制收缩：若链接文本过长被强制换行挤压，可设置禁止换行：

#editing_options a {
  white-space: nowrap;
}

额外排查建议 #

打开浏览器开发者工具（F12），查看#editing_options及内部链接的计算样式（computed），确认outline、width、flex等属性的来源，排查是否有第三方CSS框架的全局样式干扰。

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