按钮在IE中双方被拉伸的 BUG
发布时间：2020-03-19 18:57:47 所属栏目：编程 来源：站长网
导读：各人在写按钮（input、button）的时辰会发此刻 IE 下： 跟着字数的增多，双方的间距也会越来越大。 在 WIN 的XP 气魄威风凛凛下，当字数许多时，双方还会呈现严峻的锯齿。 到底是什么缘故起因呢？ 蓝色抱负 原 WEB尺度化专栏 的斑竹 zbm2001z 给出了一个谜底： 1、IE 在
|
各人在写按钮（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;} （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
