三角偏移不对齐的核心是定位问题：伪元素默认以父容器左上角为原点，需配合 left: 50% 和 transform: translateX(-50%) 才能水平居中，且父元素必须设 position: relative。
用
或
画三角时，为什么三角总偏移、不对齐？
核心问题不是“怎么画”，而是“怎么定位”。
伪元素
默认以父容器左上角为原点，
并不等于“贴在下拉框顶部正中”。必须结合
+ 明确的
才能居中。
常见错误现象：
靠左、靠右、悬空、被裁剪——基本都是忘了这一步。
必须加在伪元素上，且其父元素（下拉容器）要设
三角宽度靠
实现，比如
，但边框宽度会参与盒模型计算，影响定位基准
若下拉框有
或
，伪元素的
值需手动微调（通常
到
，取决于边框粗细）
画三角的三种写法，哪一种最稳？
只推荐用单边实色 + 其余三边透明的写法，比如朝下的三角用
配合左右透明边框。其他方式（如旋转
或
）在缩放、高DPI屏或旧浏览器里容易糊、错位。
关键参数差异：
立即学习
“
前端免费学习笔记（深入）
”；
朝上三角：
朝下三角：
边框值统一用
，避免
或
导致响应式失真
悬浮触发时三角闪动、抖动，怎么压住？
本质是渲染层切换导致的重绘抖动，尤其在 macOS Safari 和部分 Chrome 版本中明显。不是 CSS 写错了，而是浏览器对
+
的合成策略不一致。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
实操建议：
给伪元素加
（仅在需要时，别滥用）
避免在
状态里同时改
和
，只用其中一种定位方式
如果下拉框本身有
，三角伪元素也要同步加，比如
不要用
控制显示，改用
+
IE11 或低版本 Edge 下三角不显示，缺了什么？
IE11 不支持伪元素上的
对
的修正，会导致三角完全偏左。必须降级处理。
兼容方案（不引入 JS）：
用
（负值 = 三角底边宽度一半）替代
对 IE 使用条件注释或
单独覆盖
确保伪元素有明确的
，IE 对空伪元素渲染更严格
真正麻烦的不是画不出三角，是不同浏览器对“居中”的理解差那几个像素——调的时候盯着 DevTools 的 layout 边框看，比查文档管用。
::before::aftertop: 0; left: 0;transform: translateX(-50%)left: 50%triangleposition: absoluteposition: relativeborderborder-left: 6px solid transparentborder-radiuspaddingtoptop: -6px-10pxborderborder-top: 6px solid #333skewclip-pathborder-bottom: 6px solid #333; border-left: 6px solid transparent; border-right: 6px solid transparent;border-top: 6px solid #333; border-left: 6px solid transparent; border-right: 6px solid transparent;pxemremtransformopacitywill-change: transform:hovertoptransformtransitiontransition: opacity .2s, transform .2sdisplay: none/blockopacity: 0; visibility: hidden;pointer-events: none;transform: translateX(-50%)left: 50%margin-left: -6pxtransform: translateX(-50%)@supports not (transform: translateX(-50%))width: 0; height: 0;