如何在浏览器之间获得一致的行高 [英] How to get consistent line-heights between browsers
问题描述
这个问题基本上是。找到这个问题的答案需要这个问题。
一>。它建立一个60px高的容器。
.container {
background-color:lightgreen;
height:60px;
最大高度:60px;
line-height:60px;
font-size:60px;
$ / code>
在Firefox中,它是 60px $ c在所有情况下都很高。在Chrome中,文本高度实际上高于
,有时是其他值)。 60px
(有时
我可以减少 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.
这篇关于如何在浏览器之间获得一致的行高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!