input与select在不同浏览器上的宽度显示不同

最新推荐文章于 2019-09-04 11:45:50 发布
最新推荐文章于 2019-09-04 11:45:50 发布
阅读量584 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaocen99/article/details/38636881
版权

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

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

解决的方法：

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

xiaocen99
关注
专栏目录
jQuery判断浏览器并动态调整select宽度的方法
11-23
示例代码中还包含了一些注释，解释了在特定DOCTYPE下，`<select>`元素的宽度可能与具有相同样式宽度的`<input type="text">`或`<textarea>`元素不一致。这个方法旨在解决这种不一致性，确保所有浏览器下`<select>`...
select和input不会继承字号body font-size
12-03
然而，对于`select`和`input`这样的表单元素，即使`font-size`理论上可以继承，但在实际渲染时，浏览器的用户界面（UI）默认样式可能会覆盖这一特性。 此外，代码中还展示了如何使用JavaScript动态改变页面的字体...
input和select在浏览器中宽度不同解决方案（原创）
04-10 460
在给一个网站做适配的时候，遇到的问题，input和select 均设置相同的宽度，最后浏览器下呈现出来的宽度不一样，一时间很难下手。 于是找到了根本原因 select的css width样式，包含边框和内边距，即：真实的width=CSS width。 而input的css width样式，则不包含边框和内间距，真实的width=CSS width border padding。 ...
不同浏览器上input与select宽度显示不同的本质原因
The code world of freedom
08-05 4468
做表单开发时经常碰到一个问题，input和select是其中最常用的两个标签，但是有个问题很棘手。input和select是两种不同的和模型，如果只是简单的将两者的width设置成一样，将会出现下面的效果： *{margin:0;padding:0;} body{margin: 50px;} input{outline-style: none;}
css解决input和select的宽度不一致问题
桐匠的博客
07-16 6059
input和select的宽度默认不同，input总是比select长那么一点
jQuery插件：美化<select>标签，兼容多浏览器与后期加载
- 复制`<select>`的`disabled`状态、宽度（`style.width`）和显示模式（`style.display`）到新的`<input>`上。 - 将新创建的`<input>`插入到`<select>`之后，使其显示在选择框的位置。 - 设置`<select>`的显示...
jQuery插件美化<select>标签，兼容多浏览器
2. 遍历每个需要美化处理的`<select>`，为它们创建一个模拟的`<input>`元素（即"dummyinput"），并将`<select>`的一些属性（如disabled状态、宽度和显示方式）复制到新创建的`<input>`上。这样，`<input>`看起来就像...
用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法
09-25
总的来说，通过理解`vertical-align`属性的工作原理，并巧妙地应用到img、input、select和button这些元素上，我们可以有效地解决这些元素在页面中的垂直对齐问题，从而创建更美观、更一致的网页布局。
ie8 input 文字偏上/偏下问题
进击的WEB前端-小黄毛
11-27 8251
ie8 input 文字偏上/偏下问题
input和select在设置同样的宽度下长度不一。
casanover
08-10 4194
学会活用：    box-sizing：border-box http://www.jianshu.com/p/e2eb0d8c9de6
input框在不同浏览器下面显示不同的结构问题
weixin_30876945的博客
12-26 255
在谷歌浏览器下面，无论input框范围再小，input里面的文字也能按照大小显示出来。 但是在火狐浏览器下面，文字会被截断。 火狐浏览器下面显示的 谷歌浏览器下面显示出来的 这里input框里面的宽度只有10px，所以文字会有截断。 火狐浏览器对齐方式是上对齐。截断下面部分 转载于:https://www.cnblogs.com/xiongmaoblog/p/6221090.htm...
input和select宽度不一致
Mh_ui的博客
09-04 1062
select的css width样式，包含边框和内边距，真实的width=CSS width input的css width样式，不包含边框和内间距，真实的width=CSS width border padding 方法： select,input{ box-sizing:border-box; } box-sizing:content-box（默认属性值）： width为co...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值