您现在的位置:主页 > CSS实例 > 文章内容

CSS布局实例:隐藏input 文字

作者:admin     来源:未知     日期:2011-11-28    点击:0
  我们来看下面的代码,成功的实现了隐藏input 文字。但分为三种情况,我们在后面进行分析。

div css xhtml xml Source Code to Run Source Code to Run [www.]
    [ 可先修改部分代码 再运行查看效果 ]
  我们需要特别注意的是下面的代码:

div css xhtml xml Example Source Code Example Source Code [www.]input {
 margin:5px 0;
 width:200px;
 height:20px;
 display:block;
 overflow:hidden;
 background:#f9f9f9;
 border:1px solid orange;
}
我们看下面的分析:

第一种方法

div css xhtml xml Example Source Code Example Source Code [www.]input.a {
 ie:expression(bb.value="提交");
 text-indent:-200em;
}
  在opera上有问题

第二种方法

div css xhtml xml Example Source Code Example Source Code [www.]input.b {
 padding-top:20px;
}
  如果这个值太小了在opera上文字还是可见,所以设置大一些就没问题了,但FF中又会出现把高度撑大的现象;

第三种方法

div css xhtml xml Example Source Code Example Source Code [www.]input.c {
 font-size:100em
}
  这种方法应该说是兼容性最好的
  FF有点bt.在padding的时候,IE,OPEAR的高度与宽度都不变,就FF变。
   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:(评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。)

精彩广告

    精彩推荐


      Copyright © 2011-2013 CSS教程网 版权所有