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

做表单开发时经常碰到一个问题,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>

总结:

设置select的CSS width=input 的CSS width border padding

Done perfectly!

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-06 11:56:10

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

解决手机浏览器上input 输入框导致页面放大的问题(记录)

在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不包含 border边框和padding内边距,即:设置的只是内容本身的高与宽.border与padding不在值里面,在浏览器上显示可见. select  width,height 值里面, 包含 border边框和padding内边距,即:设置的高宽里面包含了内容本身,border与padding

input和select在浏览器中宽度不同解决方案(原创)

在给一个网站做适配的时候,遇到的问题,input和select 均设置相同的宽度,最后浏览器下呈现出来的宽度不一样,一时间很难下手. 于是找到了根本原因 select的css width样式,包含边框和内边距,即:真实的width=CSS width. 而input的css width样式,则不包含边框和内间距,真实的width=CSS width border padding. 解决的方法: 给select添加 box-sizing: border-box; 以后完美解决. 普及box-siz

在iPhone手机上写了input type=&quot;date&quot; 显示不出来的原因

在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用iOS测试就无法显示. <input type="date"> 遇到这个问题,我的解决思路是:既然在chrome浏览器可以显示,在iOS系统上有问题,那应该是不同设备对这个属性的支持度的问题吧.我就把这个input框的value值也填上,果然,在iOS就能显示调用出日期选择了.

JS预览图像将本地图片显示到浏览器上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> /** * 从

一步使你的asp.net网站在手机浏览器上全屏显示

一步使你的asp.net网站在手机浏览器上全屏显示 1.问题 公司的asp.net网页在手机浏览器上初始化时显示的是缩放的页面,用户必须手动放大才能看清页面的字体,这样体验不好 2.解决 前段时间学习JQuery mobile 看到所有的demo页面都能全屏显示在手机上,页面上面都有这样一段代码: ? 1 <meta name="viewport" content="width=device-width, initial-scale=1"> 参数说明:

Django在浏览器上显示本地图片, 外部图片

摘自:https://blog.csdn.net/lvluobo/article/details/80945257 url的配置: 如何在浏览器上显示图片呢? Django项目在浏览器上显示本地图片,本来还以为直接放在虚拟机上,开启Django项目就可以访问到了,后来发现并不是这样的简单- 步入正题,如何在浏览器上显示本地图片,关键在于url的配置: url的配置: from django.views.static import serve url(r'^book/(?P<path>.*)$'

Android上传图片到PHP服务器并且支持浏览器上传文件(word、图片、音乐等)

暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传的照片----->点击返回键------>显示没有选择上传图片的toast------>点击上传的图片----->打印图片的存储的物理路径---->询问是否确认上传选择的图片----->确认则显示上传成功---->取消则退出 php代码: <?php //上传文

js实例_当鼠标移动到某个元素上时在元素下面显示一段提示文字

效果: 当鼠标不在自动登录上时,只显示自动登录这个表单,下面的div提示则隐藏. 当鼠标移动到自动登录这个表单时,则显示下面的div提示,当鼠标移出时再将其隐藏 代码实现与原理: HTML代码: <body> <input type="checkbox" />自动登录 <div id="div1">不要再玩游戏啦!!!</div> </body> CSS代码:给id为div1的元素做一下修饰,并且将其最开始