anchor-size()函数目前不存在于任何浏览器或css规范中，属常见误解；实际可用方案包括：css的:has()+fit-content模拟、safari专属的anchor()配合position:anchor（需实验flag）、或javascript通过resizeobserver获取锚点尺寸并同步。
anchor-size() 函数目前不能用于 HTML/CSS 中——它根本不存在于任何浏览器实现或 CSS 规范里。
这是个常见误解，可能源于把实验性提案、CSS 函数名记混了（比如 anchor-size 听起来像 anchor-position 或 WebKit 的 -webkit-anchor-position），但截至 2024 年底，CSS 标准中没有 anchor-size() 这个函数，也没有任何主流浏览器支持它。
你真正能用的、与“锚点尺寸联动”相关的机制，只有下面这几种现实路径：
用 :has() + width: max-content 模拟“跟随触发元素宽度”
适用于弹出层（如 .tooltip 或 .popover）紧跟在触发元素之后的 DOM 结构：
- 触发元素和弹出层必须是兄弟节点，且弹出层在触发元素之后（才能用
:has()反向控制） - 给触发元素加
position: relative，弹出层设position: absolute并left: 0; top: 100% - 关键样式：让弹出层宽度继承触发元素的
inline-size
.trigger {
position: relative;
}
.trigger:has(+ .popover) + .popover {
position: absolute;
left: 0;
top: 100%;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
min-width: 100%; /* 至少撑满触发元素 */
}
注意：fit-content 不是精确等于触发元素宽度，而是内容宽度；若要严格等宽，需 JS。
用 CSS anchor() 和 position: anchor（仅 Safari 16.4+ 支持）
这是目前唯一接近“锚点尺寸感知”的原生 CSS 方案，但限制极多：
- 仅 Safari 实现（Chrome/Firefox 尚未跟进），且需开启实验性 flag（
chrome://flags/#enable-css-anchor-positioning在 Chrome Canary 中也不稳定） - 必须显式声明
anchor-name: --my-anchor在触发元素上 - 弹出层用
position: anchor(--my-anchor)，再通过anchor-size(--my-anchor)获取尺寸 —— 但注意：anchor-size()是 属性值函数，只能用在width/height等接受长度的地方，且只在position: anchor上下文中有效
.trigger {
anchor-name: --my-anchor;
}
.popover {
position: anchor(--my-anchor);
width: anchor-size(--my-anchor); /* ✅ Safari 有效 */
}
⚠️ 这不是 anchor-size() 函数独立调用，它依附于 position: anchor，且跨浏览器不可用。
用 JavaScript 获取并同步宽度（最可靠、全兼容）
当 CSS 方案不可靠时，这是实际项目中的标准解法：
- 监听触发元素的
resize（需搭配ResizeObserver）和click/focus事件 - 读取
trigger.getBoundingClientRect().width，赋给弹出层style.width - 若触发元素宽高动态变化（如响应式文本缩放），记得在
ResizeObserver回调里更新
const trigger = document.querySelector('.trigger');
const popover = document.querySelector('.popover');
const ro = new ResizeObserver(() => {
const rect = trigger.getBoundingClientRect();
popover.style.width = `${rect.width}px`;
});
ro.observe(trigger);
别忘了在弹出层显示逻辑里也手动调一次，避免首次渲染错位。
真正容易被忽略的是：所谓“自动匹配锚点宽度”，在真实 UI 中往往不是纯宽度数值对齐——字体缩放、行内元素换行、padding/border-box 差异、zoom 缩放、甚至 macOS 的字体抗锯齿都会让视觉对齐失效。所以生产环境建议优先用 min-width: 100% + max-width 限制 + 内容自适应，而不是执着于像素级等宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
