不同浏览器上input与select宽度显示不同的本质原因
https://blog.csdn.net/github_22022001/article/details/47279793
做表单开发时经常碰到一个问题，input和select是其中最常用的两个标签，但是有个问题很棘手。input和select是两种不同的和模型，如果只是简单的将两者的width设置成一样，将会出现下面的效果：
-
-
<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的布局，大家可以试试在各个浏览器中都是有规可循的）
-
-
<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
-
} /* 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>
总结：
设置select的CSS width=input 的CSS width border padding
Done perfectly!
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· ［.NET］调用本地 Deepseek 模型
· 一个费力不讨好的项目，让我损失了近一半的绩效！
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）
· 全程使用 AI 从 0 到 1 写了个小工具
2019-12-05 Linux expect的安装与使用
2019-12-05 CSDN关注
2019-12-05 软件自动化部署脚本
2019-12-05 bat实现每天定时执行命令[windows底下每天重启一下Nginx]
2019-12-05 DOS命令之at命令详解
2019-12-05 windows nginx 快捷启动关闭批处理脚本
2019-12-05 windows nginx重启脚本.bat