在Safari中,文本的位置与其他浏览器不同。这是有原因的吗?是否有样式可以确保它符合精确的测量标准。
* {
margin: 0;
padding: 0;
}
#btn_signup {
opacity: 1;
position: absolute;
width: 185px;
height: 50px;
left: 10px;
top: 10px;
overflow: visible;
}
#Rectangle_1 {
opacity: 1;
fill: transparent;
stroke: rgb(67, 66, 93);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 185px;
height: 50px;
left: 0px;
top: 0px;
}
#Sign_up {
opacity: 1;
position: absolute;
left: 58px;
top: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: visible;
width: 63px;
white-space: nowrap;
text-align: center;
}
#Path_1 {
opacity: 1;
fill: rgba(0,0,0,0);
stroke: rgb(112, 112, 112);
stroke-width: 0.5px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Path_1 {
overflow: visible;
position: absolute;
top: 16.5px;
left: 1px;
width: 183.5px;
height: 0.5px;
transform: matrix(1,0,0,1,0,0);
}
<div id="A5">
<div id="btn_signup">
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="4" ry="4" x="0" y="0" width="185" height="50"></rect>
</svg>
<div id="Sign_up">
<span style="font-family:Helvetica;font-style:normal;font-weight:normal;font-size:18px;color:rgba(77,79,92,1);display:inherit;">Sign up</span>
</div>
<svg viewBox="12.5 0 183.5 0.5" class="Path_1">
<path id="Path_1" d="M 12.5 0 L 196 0"></path>
</svg>
</div>
</div>
![enter image description here](https://istack.dev59.com/WgStG.webp)
我该如何去掉这个间隙?
增加了悬赏。如果需要更多明确,请提问。
更新:
感谢所有关于垂直居中的建议。我的一半情况可以通过垂直居中来解决,但其余情况是顶部对齐的情况。
看起来我想要的是将文本内容(内容的边界框处于大写字母高度)与文本行的顶部对齐,如图片所示。
资源:
看起来这是跨平台的常见问题。
Cap height and x-height metrics are inaccurate
Vertical Metrics
line-height
;尝试明确设置它。 - Mr Lister