在 Windows 中查看网页时文本向下移动
在Ubuntu中开发了一个页面后,我在Windows 7中查看了它。 我发现在 Windows 中查看时文本略有向下移动。
下左图是Ubuntu 11.04上的Google Chrome的屏幕截图 右图是 Windows 7 上的 Google Chrome 的屏幕截图
请注意右图中的文本向下移动。在这两个平台上的 Chrome 和 Firefox 中都可以看到相同的效果。 (IE 也是如此,如果有人感兴趣的话)
这是因为 Windows 中使用了不同的字体吗? 我在这里使用的字体堆栈是 -
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
尽管我也尝试过使用简单的堆栈 -
font-family: Helvetica, Arial, sans-serif;
但问题仍然存在。如果这是由于字体更改造成的,我可以使用 CSS hack 在 Windows 中将字体稍微提高一点吗?
注意,我正在使用 Paul Irish 的 HTML5 样板 - 其中包括 CSS 重置。
After developing a page in Ubuntu, I viewed it in Windows 7.
I found a slight downward shift in the text when viewed in Windows.
The left image below is a screenshot from Google Chrome on Ubuntu 11.04
The right image is a screenshot from Google Chrome on Windows 7
Notice the downward text shift in the right image. The same effect is visible in both Chrome and Firefox on both the platforms. (IE also, if anyone is interested)
Is this due to different fonts being used in Windows?
The font stack I'm using here is -
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
Although I've also tried using a simple stack like -
font-family: Helvetica, Arial, sans-serif;
but the problem still exists. If this is due to change of fonts, can I use a CSS hack to raise the font by a small margin in Windows?
NOTE that I'm using Paul Irish's HTML5 boilerplate - which includes a CSS-reset.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这不是垂直对齐问题。确保为该文本设置了
margin
、padding
和尤其是line-height
值。我建议使用line-height
百分比(例如 120%)This isn't a vertical-align issue. Make sure that your
margin
,padding
and ESPECIALLYline-height
values are set for that text. I recommend using percentages forline-height
(e.g. 120%)