📊 回测柱状图轴线精密对齐测试

方案A：height:280px + top:50% + margin-top:-0.5px
✓ 轴线高度：1px
✓ 轴线定位：top:50%;margin-top:-0.5px
✓ 容器高度：280px（140px × 2）
预期：轴线应该精确位于容器中点，红色柱底部和绿色柱顶部对齐
25%
75%
股票1
+15% / +12%
股票2
-8% / -10%
股票3(✗)
+20% / -5%
股票4(✗)
-12% / +8%
✓ 检查清单：
  • 轴线是否与红色柱的底边（零轴上方）精确对齐？
  • 轴线是否与绿色柱的顶边（零轴下方）精确对齐？
  • 股票3和股票4的柱子是否分别跨越轴线两侧？
  • 轴线是否为水平直线，没有上下偏移？
方案B：height:280px + top:calc(50% - 0.5px)
✓ 轴线高度：1px
✓ 轴线定位：top:calc(50% - 0.5px)
✓ 容器高度：280px
用 CSS calc 计算：50% 的位置减去 0.5px（一半的轴线高度）
25%
75%
股票1
+15% / +12%
股票2
-8% / -10%
股票3(✗)
+20% / -5%
股票4(✗)
-12% / +8%
✓ 对比方案A：
两个方案应该看起来完全一样。如果有区别，说明浏览器渲染存在微妙差异。
🔧 诊断与建议
⚠️ 如果轴线仍未对齐，请检查以下几点：
  • 浏览器缩放：确保浏览器缩放为 100%（Ctrl+0 重置）
  • 显示器分辨率：某些分辨率下可能存在亚像素渲染问题
  • 抗锯齿：禁用浏览器的硬件加速可能改善边界清晰度（F12 → Settings → ☑ Disable cache）
  • PDF 打印预览：尝试用 Ctrl+P 预览打印效果，可能对齐更清晰
📌 实际问题可能是：
  • 容器高度与柱子定位计算不匹配（应为 280px = 140px + 140px）
  • 轴线没有考虑到浏览器的亚像素渲染（subpixel rendering）
  • CSS 中的 half_h 变量没有正确替换为 140
  • 父容器的高度被其他 CSS 覆盖或继承
💻 正确的代码实现
<div class="bt-chart" style="position:relative;height:280px">
  <!-- 轴线：top:50%;margin-top:-0.5px -->
  <div style="position:absolute;left:0;right:0;top:50%;margin-top:-0.5px;height:1px;background:#d1d5db;z-index:1"></div>

  <!-- 条形容器 -->
  <div style="display:flex;gap:8px;height:100%;padding:0 8px;position:relative;z-index:2">
    <!-- 每只股票的双柱 -->
    <div style="display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;gap:0">
      <div style="position:relative;width:100%;height:280px">
        <!-- 预测柱：bottom:140px（零轴上方） -->
        <div style="position:absolute;left:50%;transform:translateX(-55%);width:10px;bottom:140px;height:75px;border-radius:2px 2px 0 0;background:#d7263d"></div>

        <!-- 实际柱：bottom:140px（零轴上方） -->
        <div style="position:absolute;left:50%;transform:translateX(calc(45%));width:10px;bottom:140px;height:60px;border-radius:2px 2px 0 0;background:#f9a8b8"></div>
      </div>
    </div>
  </div>
</div>