简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:752 次  日期:2016-06-24 14:15:00

温馨提示:易贤网小编为您整理了“按钮在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;}

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:html 鼠标 css 控制
下一篇:将XHTML CSS页面转换为打印机页面
易贤网手机网站地址:按钮在IE中两边被拉伸的 BUG
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!