关于button按钮在IE中的宽度问题

最新推荐文章于 2023-12-13 17:01:12 发布
原创 最新推荐文章于 2023-12-13 17:01:12 发布 · 871 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#button #ie #浏览器

本文探讨了在Internet Explorer浏览器中Button元素显示异常的问题。当Button内的文本过长时，其宽度会随之增加，导致布局混乱。文章提供了一个简单有效的解决方案：通过设置overflow属性为visible来确保Button的宽度可以被正常控制。

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

 Button 在IE中的默认显示与其他浏览器大相径庭，button的文字越长，button的宽度就成比例的放大，padding的设置完全失效。用IE浏览文字很长的button，基本上是场灾难～
 在IE中，button的默认overflow是clip (奇怪的参数)，在这种情况下width:auto不起作用，所以加上overflow:visible，搞定！

给elementUI中el-button加宽高背景颜色，大小设置，去掉默认颜色边框,园角度
m0_49714202的博客
01-29 2万+
1.尺寸大小设置 设置宽高需要把尺寸改为最小给el-button加size=“mini” 就可以设置宽高了width height 2.背景颜色 ( 默然样色类型 type=“primary” ) (1)想要改变背景颜色 style=“background: #fb435f” 就出现背景颜色 ，但是本身有默认颜色边框他的primary el-button外面div加个名 .bg_btn >>> .el-button–primary { border: none; } 加这个就可以去掉默认
Element 修改el-tooltip样式和文字过长换行显示
weixin_43829905的博客
11-19 2355
Element 修改el-tooltip样式和文字过长换行显示Element 修改el-tooltip样式和文字过长换行显示 Element 修改el-tooltip样式和文字过长换行显示 <el-tooltip placement="top" popper-class="new-tooltip"> <div slot="content">工程项目名称2很长很长很长很长很长很长很长很长很长很长很长很长很长很长</div> &lt
IE6,IE7下按钮(BUTTON)变宽的解决方法
09-25
给按键添加个样式就OK了，没研究开始的时候就重置它，有空在完善下。
button按钮在IE中的宽度
weixin_33829657的博客
10-15 156
Button 在IE中的默认显示与其他浏览器大相径庭，button的label越长，button的宽度就成比例的放大，padding的设置完全失效。用IE打开本页看看下面这个button，基本上是场灾难～ 在IE中，button的默认overflow是clip (奇怪的参数)，在这种情况下width:auto不起作用，所以加上overflow:visible，搞定！<button st...
IE下按钮(button)根据内容自动调整宽度
lhhliang的专栏
03-18 2298
     在项目中，需要按钮根据内容自动调整宽度，同事通过CSS实现后，发现在FF，Safari下是OK的，居然在IE7下不行。按钮字体两边总会有空地方。      通过网上查找资料后，原来是因为FF和IE下对input按钮设置padding大小不一，有差别，解决方法也很简单，在IE的下对按钮的样式控制加上overflow 属性，并设为visible就OK了（见图二）。 
button按钮自带不可见的宽度属性
奇怪的接口
04-04 1208
CSS自动居中，必须对对象设置宽度才能生效。但是如果不对button设置宽度，加上以下CSS样式，button也可以自动水平居中： button { display: block; margin: 0px auto; } 对照button的默认样式如下： padding: 1px 6px; align-items: flex-start; text-align: ...
让IE的Button自适应文字宽度兼容
weixin_33843947的博客
06-13 286
为什么80%的码农都做不了架构师？>>> ...
button按钮在 IE 中两边被拉伸的解决办法
05-25
标题中的“button按钮在IE中两边被拉伸的解决办法”是一个常见的前端开发问题，尤其在处理跨浏览器兼容性时。在Internet Explorer（IE）浏览器中，HTML的`<button>`元素可能会出现样式异常，例如按钮的内容被拉伸，...
按钮在IE中两边被拉伸的 BUG
01-19
大家在写按钮（input、button）的时候会发现在 IE 下： 随着字数的增多，两边的间距也会越来越大。 在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。 到底是什么原因呢？ 蓝色理想 原 WEB标准化专栏 的...
Button在IE6、7下的自适应宽度问题解决方法
09-25
首先，我们来看一个基本的按钮实例，其宽度会在IE6和IE7中出现问题。为了解决这个问题，开发人员可能会尝试设定一个固定的宽度，如`width:100px`。这样做虽然可以解决宽度问题，但限制了按钮内容的自适应能力。 ...
input 按钮在IE下显现不一致的兼容问题
12-13
这段时间在处理网页默认的input 按钮时，IE下常显现不一致的宽度问题，让人感到很纠结。所以今天请教了几位高手把这个问题解决了，现在贴出来和大家共享一下，当然这个方法在网上曾有人写过，大家可以一起来相互探讨...
el-button展示部分文本内容
weixin_43866250的博客
08-29 1334
如果你想在el-button组件中展示部分文本内容，你可以使用 CSS 的文本溢出处理来实现。如果你想将两个按钮放在同一行，你可以使用 CSS 的 display 属性来实现。/* 按钮在水平方向上均匀分布 *//* 使用省略号处理溢出文本 *//* 主轴方向为水平方向 *//* 设置父容器宽度 *//* 设置为弹性布局 *//* 防止文本换行 */
element ui 表格中的字太长，想要把多余的字变成...解决方法，一个属性即可
梁同学与Android
08-25 3735
问题描述如下 相应代码段 <el-table style="width: 100%" height="330px" :data="tableData" border stripe> <el-table-column align="center" type="index" label="#"></el-table-column> <el-table-column align="center" label="社团编号" prop="a
el-button宽度随内容长度自适应
最新发布
weixin_43896145的博客
12-13 2118
需要增加:style="{ width: 'auto' }"；
elementUI按钮文本过长导致无法居中问题
qq_40946374的博客
01-08 3515
.el-button{/* 全局按钮字体 */ font-family: "Microsoft YaHei UI"; font-weight: normal; font-size: 15px; width: 150px; text-align: center; } 按钮的文本已经设置了text-align:center，除了一个字比较多的按钮，其他按钮的字体都是居中的。.
element el-button边框颜色渐变
qq_59626859的博客
06-02 1301
element el-button边框颜色渐变与padding-left用于解决当el-button文字过长导致不居中的问题。
button文字超长换行_网页里的超长文字超出边界？不用慌，超哪断哪
weixin_39959126的博客
11-27 2069
文字是网页展示内容的重要载体，最常见的文字有中文和英文。但浏览器处理同时含有中文和英文的句子时，会发现换行处理是不尽人意，要么长单词超出容器，要么单词断的太快，造成阅读的障碍。所以处理文字换行很有必要掌握！语法word-break:value(为以下取值)；Normal，默认值，根据浏览器默认规则来拆分换行，每种浏览器可能都会有不同效果keep-all，凡是长单词，都不拆行，或者半角空格或连字符处...
element-UI组件el-button样式覆写 - 生效篇
热门推荐
草巾冒小子的博客
03-21 4万+
踩坑：el-button样式覆写 表单代码参考： <!-- 表单区域 --> <div class="wd1200 form-container"> <el-row :gutter="0"> <el-col :span="12" class="bg1"> <div id="form-cnt"> ...
解决IE浏览器中button按钮拉伸问题的方案
在IE浏览器中，开发人员经常遇到的一个界面问题是在使用按钮（button）元素时，按钮的两边会被拉伸，导致布局变形或者按钮的视觉效果与设计图不符。这通常是由于IE浏览器在渲染网页时使用了与其他现代浏览器不同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值