表单button的text-indent问题

昨天在《表单button的行高问题》一文中简单的描述了一下表单中的“button”(包括input[type="submit"]/input[type="reset"]/button)行高在Firefox和Opera中不以按设置值解析。今天我想和大家一起来说表单中“button”的“text-indent”属性在IE中的bug。

首先我们来看一个实例:

HTML Markup

    <input type=”submit” value=”Submit” id=”btn” />
  

CSS Code

在这个实例中,通过图片背景来制作Button,采用了图片替代文字最常用的一种方法“text-indent”来制作

    #btn {
      width:114px;
      height:37px;
      border: none;
      background: transparent url(images/submit_btn.gif) no-repeat center;
      overflow: hidden;
      text-indent: -999px;
    }
  

上面代码,在现代浏览器中不会有任何问题,可是在IE下“text-indent:-999px”是不起作用的,请看效果图:

如何解决

为了让各浏览器下能正常化显示,我一般碰到这样的问题都是在上面的代码基础上加上“font-size和line-height之类的设置”:

    #btn {
      width:114px;
      height:37px;
      border: none;
      background: transparent url(images/submit_btn.gif) no-repeat center;
      overflow: hidden;
      text-indent: -999px;
      
        font-size:0;
        line-height:0;
        display:block;
      
    }
  

这样一来就能达到各浏览器下一样的效果了。最后我们在来看看他是如何工作的。或者说为什么要加上这几行代码?

  1. font-size:0加上font-size:0后,可以解决IE7下显示文字的问题(换句话来说,通过设置font-size等于0后,button在IE7浏览器中不会显示文本出来,达到想要的效果),但是在IE6下会有明显的一条直线,而且线条色和前景色相同。
  2. line-height:0第一条中说过了,font-size只有解决IE7下的问题,留下了一条直线在IE6中显示,要解决这个问题也简单,我们可以通过line-height设置为0来解决。
  3. display:block将button按块元素显示

这就是为何要这样设置的原因了。有时候在这样设置了以后还会给你的button留下一个小点点,我一般是通过color来设置:

    #btn {
      width:114px;
      height:37px;
      border: none;
      background: transparent url(images/submit_btn.gif) no-repeat center;
      overflow: hidden;
      text-indent: -999px;
      
        font-size:0;
        line-height:0;
        display:block;
      
      
        color: #fff;
        text-align: right;
      
    }
  

这有一个小技巧需要特别注意:这里的color色选择其背景相近的色,让人肉眼看不出来,我一般是将其文本放置左边或右边,然后择其最相近的颜色做为背景色。比如这个实例,我们选了白色。

这种方法或许大家早有用过,但有很多朋友在项目中碰到了一时无法想起如何解决?希望你阅读此文后,对你今后的工作或学习有所帮助。如果你有更好的办法,记得在下面评论中给我留言哟。

如需转载烦请注明出处:W3CPLUS

返回顶部