问题是,基于Firefox和WebKit的浏览器似乎在包含在具有均匀高度/线高的元素中,并且字体大小不均匀(或反之亦然)时,以不同的方式将文本垂直对齐.我已经看了一些类似的线程,但是我没有真正看到我的问题的任何很好的解释.
考虑http://alternativeto.net/test2.htm.这是一个非常简单的页面
- .Box
- {
- font-size: 15px;
- font-family: Helvetica,Arial;
- background-color: Blue;
- height: 20px;
- width: 60px;
- color: White;
- line-height: 20px;
- }
和
- <div class="Box">
- A text.
- </div>
如果您在Chrome和Firefox中打开该页面,您会注意到他们以不同的方式对齐文本：http://screencast.com/t/tjgA2d7T
解决方法
这是浏览器渲染问题.使用line-height 1px小于给定的高度,例如：
- .Box
- {
- background-color: Blue;
- color: White;
- font-family: Helvetica,Arial;
- font-size: 15px;
- height: 18px;
- line-height: 17px;
- width: 60px;
- }
