网络编程
位置：首页>> 网络编程>> 网页设计>> 解决IE中长按钮的显示问题

解决IE中长按钮的显示问题

作者：ximicc　来源：西米CC　发布时间：2008-06-24 12:06:00　

标签：按钮,ie,浏览器

有没有曾经为IE浏览器中长按钮莫名其妙的padding感到困扰？在分析解决方法之前，我们首先来看一下问题所在。在IE中，如果按钮文本比较长，按钮的左右边就会出现不同程度的空隙：

在IE中长按钮会出现额外的长度，看起来似乎是因为它依据错误的字号来计算按钮长度，改变按钮元素的内外边距也无法解决问题。来看一下第一个实验，利用下列代码去除按钮的Padding和Margin：

.button{
   margin:0;
   padding:0;
} 

问题并没有得到解决，原因似乎是出在width上。我们通常会使用width:auto来解决一些问题，但是在这里也起不到任何帮助：

.button{
   width:auto;
}

另外一个思路就是把按钮的长度直接设置为较小的值，使其容纳不下长文本，然后通过设置“溢出可见”让文本来撑大按钮的长度。这种方法在IE中有了预想中的效果，但是火狐浏览器却会忽略overflow的设置：


.button{
   padding:0.25em 0.25em;
   width:1px;
   overflow:visible;
}

注：原文中没有为长度设置单位，使用的是width:1，测试了一下，在IE和FF中都能正常显示。

在IE中似乎只有当overflow设置为visible时，width:auto才能起作用：

.button{
   padding:0.25em 0.25em;
   width:auto;
   overflow:visible;
}

原文地址：Button Width in IE

1
2 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com