利用css text-indnet:-9999px样式把"搜索"按钮用图片代替
利用css text-indnet:-9999px样式把"搜索"按钮用图片代替
问:
请教一个关于button的问题,大家看一下淘宝网首页顶部的搜索代码中:
<button
type="submit" class="tsearch-submit">搜索<b
class="rc-rt"></b><b
class="rc-rb"></b></button>
为什么文字“搜索”没有显示出来,只是显示了图片搜索按钮。
是怎么实现把文字“搜索”隐藏起来,用图片按钮代替呢?
答:
text-indnet:-9999px;*text-indent:0;*line-height:999em;overflow:hidden;//要注意overflow
假如高度是30px宽度是100px的按钮
width:100px; hieght:0; padding-top:30px; overflow:hidden; background:url();
问:
加*的css我记得是为了ie7的,不过我这边只用text-indent:-9999px;在ie7下显示也正常啊,为啥要加这俩属性呢?
答:
ie7、ie6下 作行内元素处理的元素 内容会随着text-indent隐藏
你说的没问题 应该是声明过display:block;
很多时候 按钮按块级元素处理的话 会引发一些不必要的麻烦
但是这不绝对 因情况而定
请教一个关于button的问题,大家看一下淘宝网首页顶部的搜索代码中:
<button
type="submit" class="tsearch-submit">搜索<b
class="rc-rt"></b><b
class="rc-rb"></b></button>
为什么文字“搜索”没有显示出来,只是显示了图片搜索按钮。
是怎么实现把文字“搜索”隐藏起来,用图片按钮代替呢?
答:
text-indnet:-9999px;*text-indent:0;*line-height:999em;overflow:hidden;//要注意overflow
假如高度是30px宽度是100px的按钮
width:100px; hieght:0; padding-top:30px; overflow:hidden; background:url();
问:
加*的css我记得是为了ie7的,不过我这边只用text-indent:-9999px;在ie7下显示也正常啊,为啥要加这俩属性呢?
答:
ie7、ie6下 作行内元素处理的元素 内容会随着text-indent隐藏
你说的没问题 应该是声明过display:block;
很多时候 按钮按块级元素处理的话 会引发一些不必要的麻烦
但是这不绝对 因情况而定
design_ss- 帖子数 : 122
积分 : 373
威望 : 0
注册日期 : 11-12-28
您在这个论坛的权限:
您不能在这个论坛回复主题
10/09/13, 06:50 am 由 design_ss
» javascript 函数的方法call()和apply()
09/09/13, 05:10 am 由 design_ss
» JS中typeof与instanceof的区别
08/08/13, 11:10 am 由 design_ss
» JS中的构造函数解析
08/08/13, 09:44 am 由 design_ss
» js对象属性方法大总结
08/08/13, 08:46 am 由 design_ss
» js中的值类型和引用类型小结 文字说明与实例
08/08/13, 06:35 am 由 design_ss
» CSS3中轻松实现渐变效果
05/07/13, 09:48 am 由 design_ss
» jQUery 常用实例
03/07/13, 09:56 am 由 design_ss
» mask_layer 遮照
03/07/13, 08:18 am 由 design_ss