demo在这里:
http://jsbin.com/fihikoheno/edit?html,css,js,output
http://output.jsbin.com/fihikoheno
在安卓手机上会出现这种情况,pc没有任何问题?(ios没有测试)
不知问题出在哪?
<!DOCTYPE html>
<html style="font-size:14px;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>哈哈</p>
</body>
</html>
*{padding:0;margin:0;}
p{
width:30px;
height:1.2rem;
line-height:1.2rem;
background:red;
font-size:10px;
color:#fff;
text-align:center;
}
大家讲道理2017-04-17 11:47:14
The display problem below 12px can be solved by enlarging the whole first and then reducing it with css3
PHP中文网2017-04-17 11:47:14
There’s no way around it. Each browser renders line-height
differently, not just line-height
. In fact, when writing a vertically centered layout, it doesn’t matter whether you use postion
or box
layout. , cannot and cannot be absolutely centered on all machines
黄舟2017-04-17 11:47:14
I agree with the answer above. You can center it normally if you set the font to 12px or above. I did it this way before
迷茫2017-04-17 11:47:14
Our height is written the same as the row height, it should be 14*1.2 = 16.8; both the height and row height should be 16.8
However, we see that the results of the two are different under chrome, indicating that the rendering of the two is different. And browsers handle decimal points differently, so I guess there should be an error. If you want to achieve vertical centering, don't write the height and row height. Just use the same padding value for the top and bottom. In this way, even if there are decimals, they will be omitted and become the same.
天蓬老师2017-04-17 11:47:14
The simulator on the PC simulates a vertically centered view, but in actual mobile phones, the Apple phone renders it vertically centered, while the Android phone renders it higher. The compatible method is not to set the height. Set line-height to 1 and use equal padding values to maintain vertical centering.
高洛峰2017-04-17 11:47:14
Let me ask first, did you open it in the WeChat browser? WeChat has this bug
天蓬老师2017-04-17 11:47:14
This happens when the font size is too small. I have also encountered it. It is not completely centered