如何在浏览器之间获得一致的行高

问题描述

这个问题基本上是。找到这个问题的答案需要这个问题。

查看这个JSFiddle

一>。它建立一个60px高的容器。

  .container {
 background-color：lightgreen; 
 height：60px; 
最大高度：60px; 
 line-height：60px; 
 font-size：60px; 
 
 $ / code> 

在Firefox中，它是 60px （有时 69px ，有时是其他值）。

我可以减少 font-size 为 52px 在Chrome浏览器中排列成 60px 高（因此，给我一个完美的 60px 高内联元素，并允许我垂直居中可靠），但这不仅是特定于Chrome，而是特定于计算机。

如何获得一致的字体高度？

浏览器有自己的预设样式，你可能需要重写。设置这在你的CSS的顶部，以消除任何默认值：

  html，body，div，span，h1，h2，h3 ，h4，h5，h6，p，blockquote，pre，
a，em，img，strong，sub，sup，b，i，dl，dt，dd，ol，ul，li，
 fieldset，表单，标签，图例，
表格，标题，tbody，tfoot，thead，tr，th，td，
文章，旁边，画布，细节，图，figcaption，页脚，标题，hgroup，
 menu，nav，output，section，time {
 margin：0; 
 padding：0; 
 border：0; 
 font-size：100％; 
字体：继承; 
 vertical-align：baseline; 
} 
  

然后在您想要的样式之后。

This question is basically an extension of this one about an issue I was having with vertical centering. Finding the answer to that question created a need for this question.

Have a look at this JSFiddle. It sets up a container to be 60px tall.

.container {
    background-color: lightgreen;
    height: 60px;
    max-height: 60px;
    line-height: 60px;
    font-size: 60px;
}

In Firefox, it is 60px tall in all cases. In Chrome, the text height is actually taller than 60px (sometimes 69px, sometimes other values).

I can reduce the font-size to 52px to get it to line up as exactly 60px tall in Chrome (thus giving me a perfectly 60px tall inline element and allowing me to vertically center reliably) but that is specific not only to Chrome, but to the computer.

How can I get a consistent font height?

解决方案

Each browser has it's own preset styles that you might need to override. Set this at the top of your css to remove any defaults:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, footer, header, hgroup,
menu, nav, output, section, time {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

And then style however you wish after.

这篇关于如何在浏览器之间获得一致的行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！