button默认边框实为outline而非border，多数“黑边”是聚焦时浏览器自动添加的outline；IE6/7下submit按钮黑边需用filter: chroma(color=#000000)解决；安全移除outline应采用:focus-visible方案并提供替代视觉反馈。
button 默认边框是 border 还是 outline？
绝大多数情况下，你看到的“黑边”不是 border，而是浏览器自动添加的 outline——尤其在 IE6/7、Firefox 旧版、以及部分 WebKit 内核下点击或聚焦时触发。它不参与盒模型计算，但会覆盖在元素视觉层之上，导致样式错乱。
验证方法很简单：给按钮加 border: 3px solid red，如果黑边仍压在红色边框外面，基本可断定是 outline；如果黑边被红色边框“吃掉”或位置重叠，则可能是旧版 IE 的 border 渲染 bug（如 IE6/7 下 input[type=submit] 的黑边）。
-
outline是焦点反馈，不能无条件删，否则破坏键盘可访问性 -
border是样式属性，设border: none或border: 0即可清除 - IE6/7 下某些
button和input[type=submit]的黑边，border: none失效，必须用filter: chroma(color=#000000)
如何安全移除 focus 状态下的 outline
直接写 outline: none 很危险——它会让键盘用户完全无法识别当前聚焦控件。正确做法是先移除默认 outline，再为 :focus 提供替代视觉反馈。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
button:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25);
}
更现代的做法是用 :focus-visible 精准控制：
button:focus:not(:focus-visible) {
outline: none;
}
button:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
-
:focus-visible只在键盘聚焦时生效，鼠标点击后不显示 outline，体验更干净 - 务必保证
outline宽度 ≥ 2px，颜色与背景对比度 ≥ 3:1（WCAG 2.1 要求） - 避免用
outline: 0—— 部分旧浏览器不识别，且语义不清
IE6/7 下 button/input[type=submit] 黑边怎么破
这是经典兼容性问题：border: none 在 IE6/7 中对提交类按钮无效，黑边顽固残留。根本原因是其渲染引擎对表单控件的私有处理逻辑，CSS 层面只能靠滤镜 hack。
最稳妥的全局方案（加在 reset.css 里）：
input[type=submit],
input[type=reset],
input[type=button],
button {
filter: chroma(color=#000000);
}
注意点：
-
filter: chroma仅 IE 支持，现代浏览器忽略，不影响其他环境 - 属性选择器在 IE6 不支持，若需兼容 IE6，改用类名，例如
.btn-submit { filter: chroma(color=#000000); } - 该滤镜会把按钮上所有 #000000 像素变透明，所以按钮文字不能是纯黑，否则消失
Webkit 下 search 输入框的边框和删除按钮怎么清
input[type=search] 在 Safari、Chrome 等 WebKit 浏览器中自带圆角、内阴影、右侧 × 删除按钮，border: none 常常无效——因为这些不是标准 border，而是 WebKit 私有伪元素和 appearance 控制的。
关键三步：
input[type="search"] {
-webkit-appearance: textfield;
border: none;
outline: none;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
display: none;
}
-
-webkit-appearance: textfield是核心，它把搜索框还原成普通文本框行为 - 伪元素
::-webkit-search-cancel-button必须显式隐藏，否则 × 图标残留 - 不要只写
-webkit-appearance: none—— 它会让输入框失去所有默认样式，包括 padding 和 line-height，需手动补全
真正麻烦的从来不是“怎么去掉”，而是“去掉之后谁来承担可访问性责任”。一个没 outline 的按钮，对键盘用户来说就像一堵看不见的墙。所有看似“视觉修复”的操作，背后都得有一套明确的焦点反馈逻辑兜底。
