HTML，CSS：上横线匹配平方根符号

Question

在HTML4和/或CSS中是否有一种方法可以正确地执行以下操作：

√¯¯¯¯¯¯φ·(2π−γ)     ↑ ← ←  ←

如何将表达式移至左侧，在上下的“¯”符号下重叠？注意：它应该适用于每个字体大小。

谢谢！

（我的当前代码，感谢Matthew Jones (+1)的text-decoration: overline，缺乏大小比例和正确定位overline。这就是为什么我编辑了这个问题，因为“¯”在Georgia字体中匹配大小和位置。）

- Pindatjuh

---

提示：开始使用LaTeX。一旦您在根符号下有分数等内容，它会变得更加困难。 - Avatar

Answer 1

你可以将应该出现在上划线下方的文本的CSS设置为 text-decoration:overline。

编辑：这非常接近你想要的效果（Chrome 4.1.249）：

<div style="font-family: Georgia; font-size: 200%">
    <span style="vertical-align: -15%;">&radic;</span>
    <span style="text-decoration: overline; vertical-align:-20%;">&nbsp;x&nbsp;+&nbsp;1&nbsp;</span>
</div>

很遗憾，目前似乎没有办法修改上划线本身的粗细...

- Matthew Jones

---

我刚刚使用Firebug对上面的示例进行了测试，它工作得完美！ - EAMann

我看到了（虽然 span 标签后的回车会添加水平空间，但我想您是因为 StackOverflow 的格式而添加的）。不过，我降低表达的目标并不是为了降低要求，只是让文本处于一个良好的位置。感谢您的帮助。 - Pindatjuh

如果第一个结束的span标签和下一个开始的span标签之间没有空格，那么这对我来说完美地运作。http://jsbin.com/utolo 您还可以使用border-top声明来尝试匹配厚度，效果看起来非常好：http://jsbin.com/utolo/2 - ghoppe

调整了垂直对齐方式（将其设置为-25%），以使其更好地对齐。得分！http://jsbin.com/utolo/3 - ghoppe

问题在于当尺寸较小时，它们不匹配。由于我想将其用作“容器”，因此无论大小如何，它都应该始终与根的尾部匹配。（例如，在除法内部尺寸会比“独立”小。） - Pindatjuh

@Pindatjuh 我会制作两种样式，大号和小号（用于分割）...或者更多。我认为编写 CSS 代码以完美匹配√符号的字体度量是不可行的，无论大小如何。http://jsbin.com/utolo/4 - ghoppe

Answer 2

你可以将字符放在一个单独的span下，然后在顶部加上边框进行样式设置。但是你可能需要增加√的字体大小以使其对齐。

- bimbom22

---

实际上 border-top 工作得非常好！请查看此 Fiddle 以将其与 text-decoration:overline 进行比较 http://jsfiddle.net/qDZNB/ - chowey

Answer 3

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msqrt>
        <mrow>φ(2π−γ)</mrow>
    </msqrt>
</math>

这段代码是数学公式，表示 "φ的2π减去γ的平方根"。

- reisio

---

这在所有现代浏览器中都能正常工作就太好了，不是吗？ - ghoppe

如果人们能够停止使用 IE，那就太好了。 - reisio

Answer 4

以下代码完全按照我的要求工作：

<div class="math">
    &radic;<span>&macr;&macr;&macr;&macr;</span><span style="margin-left: -2.39em; vertical-align: 0.1em;">x + 1</span>
</div>

（其中math定义了font-family: Georgia和font-size）

这适用于任何字体大小！:-)

示例：http://jsbin.com/ihaba3

- Pindatjuh

---

这在我的浏览器中看起来很糟糕。Chrome 29。 - chowey

看起来不是“完全”按要求的。它看起来支离破碎的。 - Avatar