在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ line-height,不同瀏覽器,不同字體居中差異性如何處理?

line-height,不同瀏覽器,不同字體居中差異性如何處理?

在css中,固定高度的容器中,寫一個居中文字,我最常用的就是高度和行高設置相同來處理,最近發(fā)現(xiàn)了一個問題,不知道如何處理。

樣式(最基礎的頁面,只寫了一個樣式,沒有reset)
<style>

div{
    display: inline-block;
    width: 100px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    border: 1px solid black;
    font-family: 'microsoft yahei';
}

</style>

在谷歌瀏覽器下 均居中。
在火狐瀏覽器下 mac偏上 window偏下
在ie中 偏上

這個如何處理呢,怎么在全瀏覽器保證居中效果呢。

補充了一個在windows下的效果
排序是 火狐 谷歌 ie

圖片描述

回答
編輯回答
離人歸

25-14 = 11px而11px / 2 = 5.5px,大部分瀏覽器都不會去處理 .5px,所以有些瀏覽器取 5上6下,有些瀏覽器取6上5下,所以有居不中的問題。

建議你把 25px 加大到 26px 試一下。如果不行的話,只能是針對不同瀏覽器寫幾個 hack

2018年6月14日 00:51
編輯回答
孤酒

謝邀。這個規(guī)范沒有具體要求,所以各個瀏覽器實現(xiàn)都有細微差異。希望絕對居中用其它居中技術吧,不考慮舊瀏覽器的話用 flex 是不錯的。

2017年4月12日 09:23
編輯回答
愛是癌

這個跟字體 和行高有關 你用的字體的英文也是雅黑的吧 所以導致高度不一 你找一款字體大寫跟雅黑差不多高度 效果就會好一些 (中文用雅黑英文用挑選的字體)

2018年3月9日 07:40