Question

我正在开发一种基于html / css的方法来显示数学方程式。对于平方根，我在下一个范围内使用SVG与unicode字符和border-top设置的组合。两个元素的高度以EM单位表示，因此它们应以同步方式调整大小。结果是99.9％那么我认为我的代码中没有错误。相反，有某种SVG或css怪癖：当我以编程方式更改字体大小时，这两个元素并不完美协调，如下面的视频所示。您可以在视频中看到两个元素相遇摆动点的问题：https://drive.google.com/file/d/0B3SEUh6lMcxQdVNET3oyeXBlc2M/view?usp=sharing

以下是相关代码：

<svg class="sqrt" viewBox="0 0 8 14" preserveAspectRatio="xMinYMax">
    <text x="0" y="14" font-size="15px">√</text>
</svg>

.sqrt {
    height: 1.4315em;
    width: 1.1em;
    margin-right: -.2215em; /* SVG seems to generate extra space on the right. Must investigate */
    vertical-align: bottom;
}

span.square-root-argument {
    margin-left: .088em;
    padding-top: .18em;
    padding-left: .1em;
    padding-right: .2em;
    border-top: 0.073em solid black;
}

提前谢谢!!!

我使用EM单位，但调整大小略有偏差

0 个答案: