- 浏览: 61185 次
- 性别:
- 来自: 大连
文章分类
最新评论
转自:http://www.planabc.net/2008/11/12/the_stretched_buttons_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;
大家在写按钮(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;
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1228<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 587CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1027script代码: <script type=" ... -
html之marquee详解
2014-03-28 10:07 619该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 18611。html中a标签的四个属性书写是有顺序的,如果顺序不对,显 ... -
修改360浏览器内核
2014-03-10 17:19 1902浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 728有时候,为了网页设计的美观,需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1196<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 632对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1836开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 565进行网页设计时,由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 914<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 550■ 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得 ... -
顶部浮动
2013-11-29 09:37 425<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 523很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现 ... -
转 CSS hack:针对IE6,IE7,firefox显示不同效果
2013-09-05 13:55 977CSS hack:针对IE6,IE7,firefox显示不同效 ... -
white-space:
2013-08-30 10:57 470定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1154{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 554<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 746所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同 ...
相关推荐
IE6,IE7,IE8,IE9绿色版(单个exe文件,不与系统中浏览器冲突) 现在大多数系统都已经用IE了,对于开发人员需要测试与IE的兼容性找一款IE的操作系统比较困难. 网上找到的都说用IETester,但我实际测了并不能百分百还原IE...
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
IE6 for WIN7(win7下测试ie6兼容神器,64&32亲测可用,基于虚拟机,准确度100%)
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
本文档内容涵盖:IE6升级到IE9过程中Javascript, DOM, HTML, CSS等方面的变化和调整。 概述 2 第一章:HTML 3 第一节:IE7-IE8更新 3 1. 如果缺少结束标记的 P 元素后跟 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素,会...
ieTest ie6 ie7 ie8 ie9 ie5.5
好看的CSS按钮(兼容IE6)好看的CSS按钮(兼容IE6)
如果你自己是做网页设计的,当然也希望只在自己的电脑上就能看清楚页面在IE6、IE7、IE8、FireFox等浏览器下的效果啦~~可是,微软偏偏要我们割爱,安装了IE7后,IE6也在我们的电脑中消失了。而对很多像我这样的人来...
ie6与ie7 ie8样式区分,划分在html里浏览器显示情况。
让IE6、IE7、IE8支持CSS3的圆角、阴影样式.
IE标准按钮修复IE标准按钮修复IE标准按钮修复
IE6、IE7、IE8对css和js支持方面差异的研究
ie7恢复IE6完美卸载IE7,免去了手动卸载导致浏览器崩溃的危险!!
针对firefox ie6 ie7 ie8的css样式hack
ie6 ie5 ie4浏览器兼容ie7,程序员和设计师的测试必备工具
解决IE兼容IE6,IE7,IE8,IE9,IE10js文件
可以用的,在IE工具栏添加自定义按钮的注册表文件,双击运行即可。 图标文件需要自己找并放到指定的文件夹内。
使IE5,IE6兼容到IE7模式(推荐) <!–[if lt IE 7]> ”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script> <![endif]–> 使IE5,IE6,IE7兼容到IE8模式 <!–[if lt ...
web标准很重要的一点也是最烦的一点,特别是要兼容各版本浏览器,随着微软IE7的推出,在网页设计时需要同时考虑兼容ie7前面的IE5/IE5.5/IE6版本,之前一直没有找到好的方法,最近终于找到IE版本合集软件包Multiple_...
IE和谷歌浏览器下div宽度不一致的问题解决.txt