26
2017
09

谷歌和火狐浏览器下的input的padding不同表现

之前做的一个移动端的项目中遇见一个问题,那就是在移动端的页面中input用line-height布局之后,光标和字体偏上的一个问题,在网上看,说是input的高度设置字体的高度,line-height: normal;,然后用padding撑起来,当时在移动端确实解决了光标字体偏上的问题,但是,最近做的一个PC项目中,我为了防止再次出现上面的情况,就提前使用了上述的解决方案,但是却遇见了一个很坑的问题,在火狐浏览器中直接就看不到文字,连placeholder都显示不了,很郁闷。

下面展示的错误的例子(虽然能够解决移动端光标字体偏上的效果):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>谷歌和火狐下的input框的兼容性问题</title>
    <style> * { padding: 0; margin: 0; } .input-box { width: 300px; margin: 0 auto; margin-top: 30px; } .input-style { box-sizing: border-box; display: block; width: 100%; height: 14px; font-size: 14px; line-height: normal; padding: 18px 10px; border-radius: 2px; border: 1px solid #e6e6e6; } </style>
</head>
<body>
    <div class="input-box">
        <input class="input-style" type="text" placeholder="请输入内容">
    </div>
</body>
</html>

在本地运行之后,可以发现在谷歌下面正常显示,但是在火狐下面虽然input的样式一致,但是里面的placeholder呢,而且在火狐下输入字体发现光标往后移动了,但是却没有内容,那是什么原因呢。

查看两个浏览器下面的盒模型,谷歌为下:
这里写图片描述

火狐为下:
这里写图片描述

可以看到两者的盒模型里面,高度基本上都为0,都是靠padding撑起来的,我们把两个的padding-top和padding-bottom减小,可以看到到input的高度小于设置的14px的时候,就不会再减小,但是当高度大于设置的14px的时候,高度就靠padding来计算了。这个应该是因为设置了box-sizing: border-box;,所以当padding-top+padding-bottom的值小于高度时,高度优先以设置的高度,当大于设置的高度的时候,则主要靠padding-top+padding-bottom的值来算,既然都是这样那为什么谷歌可以显示,火狐没办法显示呢?

在padding减小的时候,在火狐里面我们可以看到,当padding-top+padding-bottom的值小于设置的高度的时候,input里面的placeholder又可以显示了,可以在减小过程中可以看到input里面好像有一层蒙版,把字体遮挡住了,既然找到了原因,那我们可以换一种方法来布局,布局方式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>谷歌和火狐下的input框的兼容性问题</title>
    <style> * { padding: 0; margin: 0; } .input-box { width: 300px; margin: 0 auto; margin-top: 30px; } .input-style { box-sizing: border-box; display: block; width: 100%; font-size: 14px; line-height: normal; padding: 10px 10px; border-radius: 2px; border: 1px solid #e6e6e6; } </style>
</head>
<body>
    <div class="input-box">
        <input class="input-style" type="text" placeholder="请输入内容">
    </div>
</body>
</html>

这种布局虽然在谷歌和火狐浏览器上面input的高度相差1px多,但是最起码在两个浏览器上都能正常显示,又或者是直接通过height来布局(推荐使用),height的布局如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>谷歌和火狐下的input框的兼容性问题</title>
    <style> * { padding: 0; margin: 0; } .input-box { width: 300px; margin: 0 auto; margin-top: 30px; } .input-style { box-sizing: border-box; display: block; width: 100%; font-size: 14px; height: 38px; padding: 0 10px; border-radius: 2px; border: 1px solid #e6e6e6; } </style>
</head>
<body>
    <div class="input-box">
        <input class="input-style" type="text" placeholder="请输入内容">
    </div>
</body>
</html>

所以如果做PC端的项目还是用height布局,做移动端的还是用padding布局。另外过于火狐的input使用padding布局的那层蒙版暂时还未找见解决方案。

上一篇:Unity将来时:IL2CPP是什么? 下一篇:idea错误:main method not found in class