十四像素

解决IE6与IE7中的按钮多出1px的内边框问题

5月 9th, 2009

5 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

自古多情空余恨——这话太适合形容我此时此刻的心情，IE6/IE7这俩自作多情的浏览器经常让我愤恨不已。
这故事、这bug是这样的：

默认的按钮我不爱它，所以我想给它一个我觉得漂亮的背景，但是长度又不一致，所以就加个border，然后弄个可以repeat-x的background-image。
结果：IE6/IE7出现了1px的白色内边框。

提示：你可以先修改部分代码再运行。

^-^ 改变了一下body的背景，发现原来这个内边框其实不是白色的，而是透明的。

提示：你可以先修改部分代码再运行。

唔，幸亏是透明的，于是解决方案很快就找到啦：

提示：你可以先修改部分代码再运行。

Chomo xhtml+css bug, IE6/IE7, xhtml+css, 按钮, 表单元素

按钮兼容性解决方案

4月 4th, 2009

1 comment

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

我想，如果css界也有猪坚强的话，那一定非各位表单元素莫属，不仅仅是IE浏览器，Firefox、Safari等都将给我们造成一系列的麻烦。

按钮的问题非常多，我们很难一一都进行解决，所以相对较好的办法，就是保证其在浏览器中高度、宽度上不会有太大差异，文字在按钮中显示基本正常就可以了：

提示：你可以先修改部分代码再运行。

当然，很多情况下，我们需要有更多的考虑，这时，我们便需要借助hack来完善：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>按钮兼容性高级解决方案</title> </head> <style type="text/css"> * { margin:0; padding:0; list-style:none; } body { font-size:12px; font-family:simsun; /* 内联（display:inline）对象在换行时会产生1像素距离，默认字体使用等宽字体则使得这样的距离在各浏览器中不易存在差异。 */ } select { font-size:12px; } button, .e_button { border:1px solid #369; background:url(http://www.14px.com/wp-content/uploads/2009/04/buttonbg.gif) #fff repeat-x; color:#036; font-size:12px; padding:0 8px; *padding:0 7px; /* IE6、IE7中，会在紧贴边框的位置产生1px的与背景相同的内边框，其实际宽度会比其他浏览器多出1px */ text-align:center; overflow:visible; /* IE6/IE7中，根据内容的多少将自动产生一定程度类似padding-left与padding-right的值，此处用以解决该问题 */ height:21px; /* select在12px的状态下，IE浏览器中的默认高度为21px，并且height属性在select上于IE6是无效的，于IE7，在外观上是无效的，如需考虑与select垂直对齐的情况，21px的高度是合适的选择 */ line-height:18px; padding-bottom:3px; *line-height:17px; _padding-top:5px; _line-height:8px; /* 微调IE6与IE7中文字在按钮中显示的位置 */ font-family:arial; vertical-align:top; /* 解决IE8中，Arial字体设置时，纯中文按钮与非纯中文按钮对齐的问题，这个对齐的方式可以根据需要自行改变。 */ *vertical-align:auto; /* IE6的按钮中文字会受到vertical-align:middle;影响，IE7vertical-align:middle;并且字符集为gb系列时会向上向下分别产生1px的边距。 */ } @-moz-document domain(){ button, .e_button { padding:0 5px 3px 5px; /* FF3很奇怪，左右比一般浏览器都多出2px */ padding-bottom:4px; /* 微调FF3中文字在按钮中显示的位置 */ } } </style> <body> <div style="height:1px; margin-top:10px; overflow:hidden; background:#000;"></div> <button>按钮</button> <input class="e_button" type="submit" value="submit" /> <select><option>选项</option></select> <div style="height:1px; overflow:hidden; background:#000;"></div> </body> </html>

提示：你可以先修改部分代码再运行。

PS.该方法在IE8中文字偏上的问题暂未解决，IE8对中文的支持实在让人失望。

【附注】目前已知的按钮存在的主要问题：

IE6/IE7中：根据内容的多少将自动产生一定程度类似padding-left与padding-right的值。
IE6/IE7中：会在紧贴边框的位置产生1px的与背景相同的内边框。
IE6/IE7/IE8中：默认情况下会在其本身上下产生莫名其妙的外边距（类似margin）。
IE6/IE7/IE8/FF3中：文字在按钮中的垂直位置混乱。
IE8中：如果设置某些英文字体（如Arial），纯中文按钮与非纯中文按钮在垂直方向上便不再自动对齐。
IE6中：按钮中的文字将受到vertical-align属性的影响。
IE7中：字符集如果是gb系列（如gb2312），同时vertical-align:middle，则会产生莫名其妙的外边距（类似margin）。

[2009-04-14 已修复IE8中文字偏上的错误，方法请参见小字体小行高兼容性分析及差异解决办法]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>按钮兼容性解决方案</title> </head> <style> * { margin:0; padding:0; list-style:none; } body { font-size:12px; font-family:simsun; /* 内联（display:inline）对象在换行时会产生1像素距离，默认字体使用等宽字体则使得这样的距离在各浏览器中不易存在差异。 */ } select { font-size:12px; } button, .e_button { border:1px solid #369; background:url(http://www.14px.com/wp-content/uploads/2009/04/buttonbg.gif) #fff repeat-x; color:#036; font-size:12px; padding:0 8px; *padding:0 7px; /* IE6、IE7中，会在紧贴边框的位置产生1px的与背景相同的内边框，其实际宽度会比其他浏览器多出1px */ text-align:center; overflow:visible; /* IE6/IE7中，根据内容的多少将自动产生一定程度类似padding-left与padding-right的值，此处用以解决该问题 */ height:21px; /* select在12px的状态下，IE浏览器中的默认高度为21px，并且height属性在select上于IE6是无效的，于IE7，在外观上是无效的，如需考虑与select垂直对齐的情况，21px的高度是合适的选择 */ line-height:18px; padding-bottom:3px; *line-height:17px; _padding-top:5px; _line-height:8px; /* 微调IE6与IE7中文字在按钮中显示的位置 */ font-family:arial; } button:before, .e_button:before { content:"1"; margin-left:-2000px; margin-right:1993px; } /* 解决IE8中英文字体下纯中文模式存在的文字靠上的问题 */ @-moz-document domain(){ button, .e_button { padding:0 5px 3px 5px; /* FF3很奇怪，左右比一般浏览器都多出2px */ padding-bottom:4px; /* 微调FF3中文字在按钮中显示的位置 */ } } </style> <body> <div style="height:1px; margin-top:10px; overflow:hidden; background:#000;"></div> <button>按钮</button> <input class="e_button" type="submit" value="submit" /> <select><option>选项</option></select> <div style="height:1px; overflow:hidden; background:#000;"></div> </body> </html>

提示：你可以先修改部分代码再运行。

Chomo xhtml+css xhtml+css, 按钮, 表单元素

十四像素

Archive

解决IE6与IE7中的按钮多出1px的内边框问题

按钮兼容性解决方案

分类

最新文章

最新评论

充电器

关注web标准化的朋友

身边

十四像素

Archive

解决IE6与IE7中的按钮多出1px的内边框问题

按钮兼容性解决方案

分类

标签

最新文章

最新评论

充电器

关注web标准化的朋友

身边