最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 14:46:13
文档

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

按钮在IE中两边被拉伸的BUG:大家在写按钮(input、button)的时候会发现在 IE 下: 随着字数的增多,两边的间距也会越来越大。 在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿。 到底是什么原因呢? 蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案:
推荐度:
导读按钮在IE中两边被拉伸的BUG:大家在写按钮(input、button)的时候会发现在 IE 下: 随着字数的增多,两边的间距也会越来越大。 在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿。 到底是什么原因呢? 蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案:


大家在写按钮(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

按钮在IE中两边被拉伸的BUG:大家在写按钮(input、button)的时候会发现在 IE 下: 随着字数的增多,两边的间距也会越来越大。 在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿。 到底是什么原因呢? 蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案:
推荐度:
标签: bug 按钮 拉伸
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top