Webkit 在单个文本字符上方添加不需要的额外空间
有一种情况，我在带有按钮背景的 div 中添加单个字符。看起来很简单。但是，FF 和 Safari / Chrome 之间的文本位置不同。我创建了一个包含一个 div 和一个字符的基本页面来说明问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.testDiv{
height: 100px;
width: 100px;
background: blue;
color: #fff;
font-size: 50px;
font-family: helvetica;
}
</style>
</head>
<body>
<div class="testDiv">
1
</div>
</body>
</html>
Have a situation where I am adding a single character in a div with a button background. Seems pretty straight forward. However, the text placement is different between FF and Safari / Chrome. I created a basic page with one div and one character to illustrate the problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.testDiv{
height: 100px;
width: 100px;
background: blue;
color: #fff;
font-size: 50px;
font-family: helvetica;
}
</style>
</head>
<body>
<div class="testDiv">
1
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
WebKit 和 Mozilla 似乎对如何处理行高有不同意见。最接近的方法是添加 line-height: 1;到你的 .testDiv 规则，这会有所帮助，然后你必须开始使用 webkit 特定的属性。
WebKit and Mozilla appear to have a difference of opinion on how to treat line-height. The closest you are going to get this is to add line-height: 1; to your .testDiv rule, which will help a bit, before you have to start fudging around with webkit-specific properties.