专注优质Wordpress企业网站搭建与优化

柳影花阴:解决IE中长按钮的显示问题



SEO优化,CSS教程,Wordpress博客

原文地址:Button Width in IE

翻译整理:西米CC

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

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

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

  1. .button{
  2. margin:0;
  3. padding:0;
  4. }

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

  1. .button{
  2. width:auto;
  3. }

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

  1. .button{
  2. padding:0.25em 0.25em;
  3. width:1px;
  4. overflow:visible;
  5. }

SEO优化,CSS教程,Wordpress博客

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

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

  1. .button{
  2. padding:0.25em 0.25em;
  3. [color=Blue]   width:auto;
  4. overflow:visible;</font>
  5. }

[ 以下内容您也可能感兴趣 ]

Add a Comment