按钮在 IE 中两边被拉伸的BUG

按钮在 IE 中两边被拉伸的 BUG

作者:怿飞

大家在写按钮（input、button）的时候会发现在 IE 下：

随着字数的增多，两边的间距也会越来越大。
在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。
到底是什么原因呢？

蓝色理想原 WEB标准化专栏的斑竹 zbm2001z 给出了一个答案：

1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。
对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题，我们还是可以修复的。

IE 下给按钮元素设置 overflow 属性的 visible 值（注：padding 值仅在设置了overflow:visible 属性后才有效），这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。

最终的修复代码如下（Demo）：

input.button { padding: 0 .25em; width: auto; _width: 0; overflow:visible !ie;}

按钮在 IE 中两边被拉伸的BUG相关推荐

html字数不同相同宽度的按钮,HTML_按钮在IE中两边被拉伸的 BUG，大家在写按钮（input、button） - phpStudy...
按钮在IE中两边被拉伸的 BUG 大家在写按钮(input.button)的时候会发现在 IE 下: 随着字数的增多,两边的间距也会越来越大. 在 WIN 的XP 风格下,当字数很多时,两边还会出现严 ...
按钮在IE中两边被拉伸的 BUG
点评:大家在写按钮(input.button)的时候会发现在 IE 下: 随着字数的增多,两边的间距也会越来越大. 在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿. 到底是什么原因呢 ...
pythontkinter使按钮失效_python2.7为什么点击了quot;开始quot;按钮后，tkinter上的按钮，图中红色部分，再也点不动了？ - SegmentFault 思否...
python2.7为什么点击了"开始"按钮后,tkinter上的按钮,图中红色部分,再也点不动了?如何能在点击"开始"按钮后,还能点击tkinter的最小化,最 ...
html设置控件坐标,html表格按钮位置调整 html中怎样改变表格的位置
如何设置html 表单按钮的位置? 设置html 表单按钮的位置的代码是: 超文本标记语言, 标准通用标记语言下的一个应用. " 超文本 "就是指页面内可以包含图片. 链接,甚至音 ...
js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...
0.11内核rd_load@ramdisk.c中memcpy函数好像有bug
0.11内核rd_load@ramdisk.c中memcpy函数好像有bug,如: #define memcpy(dst,src,n) \ __asm__("cld;rep;movs ...
关于VC++6.0中getline函数的一个bug
关于VC++6.0中getline函数的一个bug 最近在调试程序时,发现getline函数在VC++6.0和其他编译器上运行结果不一样,比如有如下这段程序: #include <iostrea ...
记一次定位解决SpringBoot中内嵌Tomcat的Bug问题
你知道的越多,不知道的就越多,业余的像一棵小草! 你来,我们一起精进!你不来,我和你的竞争对手一起精进! 编辑:业余草 segmentfault.com/a/1190000038760707 推荐:h ...
公开课发布：《SQL开发中容易被忽略的BUG》by郑老师
特邀嘉宾郑老师知数堂<SQL优化>课程讲师资深数据库工程师对SQL优化有独到见解 7年SQL开发和调优经验现任职韩国法院数据中心从事数据库技术支持原SKC&CSheny ...

按钮在 IE 中两边被拉伸的BUG

按钮在 IE 中两边被拉伸的BUG相关推荐

最新文章

热门文章