解决Input与Select设置CSS宽度相同时显示宽度不同的解决！

最新推荐文章于 2023-09-04 12:08:08 发布
最新推荐文章于 2023-09-04 12:08:08 发布
阅读量2.6k 收藏 4
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LGDmar/article/details/81452918
本文探讨了在不同浏览器中Input与Select元素显示尺寸不一致的问题，并提供了一种适用于Firefox的解决方案，通过设置box-sizing属性来确保这些元素在页面上具有一致的高度和宽度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先在标准兼容模式IE和firefox是一样的，在设成同一个高度或宽度的时候，显示的input和select不一样宽，也不一样高。

在IE上，还没想到好的解决方法，如果是Firefox，则网上找到以下方法处理处理

input, select{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

LGDmar
关注
el-select根据内容实现宽度自适应
qq_52132550的博客
06-08 1640
'双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶''蚵仔煎蚵仔煎蚵仔煎'
select和input不会继承字号body font-size
12-03
为了确保`select`和`input`元素的字体大小与`body`一致，我们需要在CSS中显式地为这些元素指定`font-size`。例如，代码中使用了`select, input { font-size: 1em; }`，这里的`1em`表示字体大小为父元素（即`body`）...
Input与Select设置CSS宽度相同时显示宽度不同
行大于言
02-24 559
select的css width样式，包含边框和内边距，即：真实的width=CSS width。 而input的css width样式，则不包含边框和内间距，真实的width=CSS width + border + padding 。 解决的方法： 给select添加 box-sizing: border-box; 这就结束了？当然不 每次写页面时，我都会习惯地在顶部写上这个 *{ margin: 0; padding: 0; box-sizing: border-box; } 那讲道.
input与select 设置相同宽高，在浏览器上却显示不一致，不整齐
weixin_30815469的博客
07-25 348
遇到 input与select 设置相同宽高，在浏览器上却显示不一致，遂实验了下（IE 10.013 ，Firefox 30.0），得出以下结论 input width，height 值里面， 不包含 border边框和padding内边距，即：设置的只是内容本身的高与宽。border与padding不在值里面，在浏览器上显示可见。 select width，height 值里面， 包含...
input 和 select 宽度不一致
m0_63683116的博客
04-14 343
box-sizing: border-box;
关于el-input和el-select宽度不一致问题解决
jieyucx的博客
09-04 5411
这种情况下再给select加上width：100%，达不到预期的效果。
用CSS对TD中INPUT的宽度设置
01-19
将TextBox的asp控件放在Table中的TD里面时，不设置宽度，自动会将TD撑的很大。 查看运行后页面的源代码发现，其实TextBox控件最终在客户端显示的是input。 于是考虑用CSS对每个控件设置宽高。但设置成100%后，会将...
jQuery判断浏览器并动态调整select宽度的方法
11-23
示例代码中还包含了一些注释，解释了在特定DOCTYPE下，`<select>`元素的宽度可能与具有相同样式宽度的`<input type="text">`或`<textarea>`元素不一致。这个方法旨在解决这种不一致性，确保所有浏览器下`<select>`...
用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法
09-25
总的来说，通过理解`vertical-align`属性的工作原理，并巧妙地应用到img、input、select和button这些元素上，我们可以有效地解决这些元素在页面中的垂直对齐问题，从而创建更美观、更一致的网页布局。
css之搜索框有间隙的消除办法
weixin_38353851的博客
10-15 1583
如下图中的间隙 解决方法1：加入以下代码 body { margin：0px; } 方法2：搜索框的几个部分是用table tr td写的情况下设置 <table cellpadding="0" cellspacing="0" border="0"> 方法3： 为间隙出现的div设置margin-right: 负5px，或者margin-left：负几。就能把间隙消除了，我
css间距使用技巧,前端常用CSS小技巧
weixin_34170139的博客
08-04 810
心系少时言 等一不归人注意：以下前缀兼容性写法注释-o-：Opera-ms：//IE10-moz：//火狐-webkit：//Safari 4-5, Chrome 1-929. 移动端1px边框.border-1px {position: relative;&:after {content: '';display: block;position: absolute;left: 0;righ...
CSS调整两个SELECT间的间距
Hsing Hsu's Blog
07-26 7741
select{margin:5px   0;}
不同浏览器上input与select宽度显示不同的本质原因
The code world of freedom
08-05 4521
做表单开发时经常碰到一个问题，input和select是其中最常用的两个标签，但是有个问题很棘手。input和select是两种不同的和模型，如果只是简单的将两者的width设置成一样，将会出现下面的效果： *{margin:0;padding:0;} body{margin: 50px;} input{outline-style: none;}
input和select在设置同样的宽度下长度不一。
casanover
08-10 4246
学会活用：    box-sizing：border-box http://www.jianshu.com/p/e2eb0d8c9de6
解决select菜单(HTML控件)边框无法设置的问题
weixin_30247307的博客
08-10 329
转载于:https://www.cnblogs.com/jhxk/articles/2133619.html
select样式
hehyyoulan的博客
08-07 3552
关于Select宽度设定&nbsp; 在使用Select时,有时候需要固定宽度,有时候需要自适应,下面说下要设定固定宽度时要注意的地方: 控件设定宽度一般是直接指定width属性即可,但Select设定固度是使用style=”width:n”的形式设定,如果只设置width属性,则Select的宽度还是会随下面选择项的宽度变化而变化的,如: &lt;select width=”20px”&g...
el-input和el-select的框的宽度设置成一致的。
wlijun_0808的博客
06-01 1954
el-select和el-input的宽度一致
bootstrap中select标签如何修改宽度
weixin_51296247的博客
07-25 2300
以上代码中选择框的宽度是固定的，当我们尝试在select标签中使用css中的width来改变宽度并没有反应，那么如何解决这个问题呢？编写js来解决该问题，不添加noneSelectedText属性的话，选择框默认会显示Nothingselected。...
<el-select > 设置宽度
最新发布
03-25
- **说明**：在表单中设置 `el-select` 宽度为 `100%`，使其与 `el-input` 等其他输入组件对齐[^2][^3]。 --- #### 5. **覆盖默认样式** ```css /* 使用深度选择器覆盖 element-ui 默认样式 */ /deep/ .el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值