Astra子主题返回顶部按钮箭头仅文章页位置异常问题咨询

• 非法HTML结构异常：你自定义文章模板中将<meta name="robots" content="noimageindex">写在了get_header()函数调用之前，get_header()才会输出站点完整的<head>标签内容，这段游离的meta标签不属于HTML规范中允许的head外内容，浏览器容错处理时会将其自动插入到<body>标签的最开头，导致文章页body的初始盒模型、行高继承规则和其他正常页面不一致。Astra默认返回顶部按钮的箭头图标多采用行高实现垂直居中，继承到异常的行高值后就会出现偏移。
• 样式污染：你在文章页模板中直接写的内联<style>是全局作用域，其中对a svg的样式规则可能误匹配到返回顶部按钮中的箭头svg元素，叠加了额外的margin或transform偏移，你只检查了按钮本身的显式CSS规则，忽略了被其他全局规则叠加的属性。
• 继承属性差异：你排查时只对比了按钮本身的显式CSS规则，没有对比line-height、font-size、vertical-align这类继承属性的计算值，文章页和其他页面的body或按钮上层父容器的继承属性存在差异，也会导致inline/inline-block类型的箭头图标位置偏移。

1. 先修正HTML结构错误：将模板顶部的meta标签通过WordPress原生wp_head钩子插入到站点head中，不要直接写在get_header()之前，修正后刷新页面看偏移是否消失。
2. 限制自定义样式的作用域：给模板中自定义的返回按钮相关样式加更精确的类名限制，避免全局匹配其他页面元素的svg、a标签。
3. 定位异常继承属性：打开开发者工具的计算样式面板，分别对比正常页和异常页中返回顶部箭头图标的所有计算属性值，找到存在差异的属性后向上追溯父元素的样式规则，即可定位到具体的异常来源。

你之前加padding-top:20px属于临时覆盖方案，只会掩盖问题不会解决根本的结构或样式污染问题，按上述步骤排查即可找到根因。

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