overflow:visible后的button
button在ie6、ie7下会有个随着文字长度增减而改变的"内补丁"(暂且这么叫吧)。这个内补丁很特殊，不管你怎么写margin:0;padding:0;都去不掉，唯一的解决办法是overflow:visible。如果这时候再定义button的height、line-height就会发现在ie下button居然变高了，而且宽度也不跟ff下不一样：
代码：
<!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=gb2312" />
<title>overflow:visible给button的困扰</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
<!--
span {display:inline-block;*display:inline;height:27px;zoom:1;border:1px solid #251E9D;}
button {padding:0px 10px;height:27px;line-height:27px;border:1px solid #EFEFEF;font-size:12px;background:#87B516;overflow:visible}
-->
</style>
</head>
<body >
<span><button>测试按钮</button></span>
</body>
</html>
[/hcode]
[separator]
因为赶这做项目，这个问题就先搁一般了，今天研究了下，发现原来只要把lin-heihgt改成padding就ok了，是不是真的ok了呢？，其实还没有，ff跟ie下的高度还是有差别的，文字居中对齐也是个问题：
[img][attach]43[/attach][/img]
[hcode]<!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=gb2312" />
<title>overflow:visible给button的困扰 -- 高度不一致</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
<!--
span {display:inline-block;*display:inline;zoom:1;border:1px solid #251E9D;}
button {padding:3px 10px;border:1px solid #EFEFEF;font-size:12px;background:#87B516;overflow:visible}
-->
</style>
</head>
<body >
<span><button>测试按钮</button></span>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>overflow:visible给button的困扰</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
<!--
span {display:inline-block;*display:inline;height:27px;zoom:1;border:1px solid #251E9D;}
button {padding:0px 10px;height:27px;line-height:27px;border:1px solid #EFEFEF;font-size:12px;background:#87B516;overflow:visible}
-->
</style>
</head>
<body >
<span><button>测试按钮</button></span>
</body>
</html>
[/hcode]
[separator]
因为赶这做项目，这个问题就先搁一般了，今天研究了下，发现原来只要把lin-heihgt改成padding就ok了，是不是真的ok了呢？，其实还没有，ff跟ie下的高度还是有差别的，文字居中对齐也是个问题：
[img][attach]43[/attach][/img]
[hcode]<!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=gb2312" />
<title>overflow:visible给button的困扰 -- 高度不一致</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
<!--
span {display:inline-block;*display:inline;zoom:1;border:1px solid #251E9D;}
button {padding:3px 10px;border:1px solid #EFEFEF;font-size:12px;background:#87B516;overflow:visible}
-->
</style>
</head>
<body >
<span><button>测试按钮</button></span>
</body>
</html>
到这里，除了hack我还有其它的方法吗？
- 2009-4-24 7:26
- 艺术pk技术