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

在给一个网站做适配的时候,遇到的问题,input和select 均设置相同的宽度,最后浏览器下呈现出来的宽度不一样,一时间很难下手。

于是找到了根本原因

select的css width样式,包含边框和内边距,即:真实的width=CSS width。

而input的css width样式,则不包含边框和内间距,真实的width=CSS width border padding。

解决的方法:

给select添加 box-sizing: border-box; 以后完美解决。

普及box-sizing知识

为元素设置:box-sizing: border-box;,则表明width的宽度为内容本身宽度+padding+border(高度一样)

为元素设置:box-sizing: content-box;,(默认就是这个),则表明width的宽度就是内容本身的宽度,padding以外的再另算。

而input、select默认的样式是不同的,所以就造成了width设置的一样,但就是对不齐。全部设成border-box就省事了。

(IE8及以上版本支持。)

原文地址:https://www.cnblogs.com/dingxiangming/p/8776258.html

时间: 2024-10-28 21:40:34

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

手机端input,select屏蔽浏览器默认事件

文本框input:当文本框focus时会弹出软键盘,有时我们需要click事件而又不想触发focus事件(不要弹出软键盘) 给input添加 disabled="disabled"属性屏蔽click及focus事件,再使用touchstart来绑定点击事件 下拉选择框select:有时需要在点击的时候做出判断,同上添加disabled="disabled"屏蔽掉click,使用touchstart代替

去掉 input type="number" 在浏览器中遗留的图标样式

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{  /* chrome */     -webkit-appearance: none!important;      margin: 0;  }input[type="number"]{-moz-appearance:textfield; /*Firefox*/}

<input/>标签在 苹果浏览器中 默认的有圆角

解决方法: input{ border-radius:0; -webkit-border-radius:0; }

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

做表单开发时经常碰到一个问题,input和select是其中最常用的两个标签,但是有个问题很棘手.input和select是两种不同的和模型,如果只是简单的将两者的width设置成一样,将会出现下面的效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;} b

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

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

去掉webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

使用Webkit核心的浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页引擎,但是在开发中,让人感觉很多余的一个特性就是,在表单项中的控件聚焦时总会出现一个黄色边框(360急速模式是webkit的内核,兼容模式是ie的内核及Trident的内核),特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能. 有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效

去除浏览器中a、input获得焦点时的高亮边框

a,input等元素在android原生浏览器下获得焦点时,元素外围会出现一个橙色的高亮边框 若要去除它,通常的办法是: 代码如下 复制代码 a:focus,input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); } 不过看起来,这种方案在android 4.0以上版本的浏览器中是无效的.已知的一种在android 4.0以上版本浏览器中可以移除高亮边框的办法是: 代码如下 复制代码 a:focus,input:focus{ -webkit

CSS - Select 标签在不同浏览器中的高度设置

当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html-element-with-height Demo:http://jsfiddle.net/64px3yg5/1/ HTML: <select> <option>Here's one option</option> <option>here's another o

select在各个浏览器中的兼容性问题

我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要CSS属性的支持,打造全兼容select.对select的height.padding.line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情 况:height.100.padding.0.height.no.padding.100.no.height.no.padding,结果如下图片所示:我们可以得出以下研究属性.   IE6