如果SVG位于具有指定高度的div中，则如果高度约为10px或更低，则SVG元素将下移。
类似的事情也发生在输入标签上。
比较10px高度和20px高度的示例：
<h1>SVG</h1>
<div style="height:10px; background-color:red">
<svg style="height:10px;">
<rect x=0 y=0 width=10 height=10></rect>
</svg>
</div>
<div style="height:20px" ></div>
<div style="height:20px; background-color:yellow">
<svg style="height:20px;">
<rect x=0 y=0 width=20 height=20></rect>
</svg>
</div>
<h1>Input</h1>
<div style="height:10px; background-color:red">
<input type="text" style="height:10px;padding:0;" value="x" >
</div>
<div style="height:20px" ></div>
<div style="height:20px; background-color:yellow">
<input type="text" style="height:20px;padding:0;" value="x" >
</div>这种情况发生在铬76，FF 68和边缘42。
这是一个错误，还是有一个逻辑上的原因我还没弄明白？
最佳答案
将display: block应用于svg元素。默认情况下，svg和images这样的元素具有display: inline并位于文本基线上。
您还可以将line-height: 10px添加到第一个svg的父div中，以查看差异
关于html - 高度约10像素时，会微调SVG和输入标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57488584/