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

来源：互联网发布：库里数据统计职业生涯编辑：程序博客网时间：2024/05/21 06:57

之前做的一个移动端的项目中遇见一个问题，那就是在移动端的页面中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布局的那层蒙版暂时还未找见解决方案。

阅读全文

0 0