不同浏览器上input与select宽度显示不同的本质原因

最新推荐文章于 2024-02-27 19:23:42 发布

freedom1993

最新推荐文章于 2024-02-27 19:23:42 发布

阅读量4.4k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/github_22022001/article/details/47279793

版权

web 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

做表单开发时经常碰到一个问题，input和select是其中最常用的两个标签，但是有个问题很棘手。input和select是两种不同的和模型，如果只是简单的将两者的width设置成一样，将会出现下面的效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    *{margin:0;padding:0;}
    body{margin: 50px;}
    input{outline-style: none;}
    .input{
      width:100px; 
    } 
    .select{
      width:100px;
    } 
  </style>
</head>
<body>
    <div><input class="input" type="text" /></div>
    <div>
        <select class="select">
          <option>opt1</option>
          <option>opt2</option>
          <option>opt3</option>
        </select>
    </div>
</body>
</html>

并且是在所有的浏览器中都是这样，下面直接来看看各个浏览器中的盒模型布局就会一目了然；

chrome:

firefox:

IE：（这里IE要分代，IE8之前是一代，IE9之后是一代，看图明了）

这两个标签在不同浏览器上的表现明显不同，总结一下：

模型：border + realwidth

chrome -> firefox -> IE9+ ->IE8-

select:

2*2 + 98 -> 0*2 + 100 -> 1*2 + 98 -> 1*2 + 100 (102 100 100 102)

input:

2*2 + 100 -> 1*2 + 100 -> 1*2 + 100 -> 1*2 + 100 (104 102 102 102)

无论是哪一种情况，都会多出来2px(IE8-看似都是102，但是效果还是多出来2px),这个足够让处女座抓狂！我不是处女座，但是在实践过程中也为此抓狂过，不探索出本质原因和解决方案实在让人不安，还好是有解！其实加个内边距，一切疑惑都会迎刃而解。

select的css width样式，包含边框和内边距，即：realwidth=CSS width。

而input的css width样式，则不包含边框和内间距，realwidth=CSS width + border + padding。

解决的方法如下：（下图只是chrome的布局，大家可以试试在各个浏览器中都是有规可循的）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    *{margin:0;padding:0;}
    body{margin: 50px;}
    div{margin-bottom:1px;}
    input{outline-style: none;}
    select div{border: 0;}
    .input{
      width:96px; 
      border: 1px solid #707070;
      padding: 1px!important; 
    } /* 96+1*2+1*2=100 */
    .select{
      width:100px;
      padding:1px;
      border: 1px solid #707070;
    } /* 98+1*2+0*2=100 */
  </style>
</head>
<body>
    <div><input class="input" type="text" /></div>
    <div>
        <select class="select">
          <option>opt1</option>
          <option>opt2</option>
          <option>opt3</option>
        </select>
    </div>
</body>
</html>