欢迎来到 jackNEss'窝窝
I like simple mind

在inline-block情况下把字藏起来小技巧

2011年10月29日

在inline-block情况下把字藏起来小技巧

在我们页面制作的时候,如果遇到了比较个性化的按钮,我们一般会采取贴图的形式来去制作,但是为了维持其良好的可读性,我们都会在那个按钮上把这个按钮的功能如 “提交” 打上去,然后通过 text-indent:-999em 给藏起来,然而,这招对于 inline-block 元素却得不出我们预想中效果,是会和字一块儿向左缩进 -999em去了,这篇文章是针对这个现象来谈谈对应的解决方案。

为何要 text-indent:-999em ?

查找解决方案,首先从源头着手,就是这个 text-indent,既然是这个的问题,为什么不干脆把字设为 空值 然后 把text-indent 去掉不就解决了?其实这样做是有原因的,先看 一个例子:

<!-- html document -->
<form>
	<input class="ipt" type="text"/>
	<input class="btn" type="submit" value="搜索"/>
</form>	

这段代码其实是做一个搜索框的 html代码部分,效果如图:

假设我们现在设置了 提交按钮为 inline-block ,并且 设置了 text-indent:-999em:

/*css document*/
.btn{ display:inline-block; text-indent:-999em;}

很好,遇到问题了,根据思路,先去掉万恶的根源 text-indent:-999em,并且设置 input 的 value 值 为空:

<!-- html document -->
<input class="btn" type="submit" value=""/>

然后 F5 刷新页面,问题解决,但是,我们要考虑到的是,万一 用户一方 网速很不给力,以至连样式也读不出,这样的话就会发生以下的情况:

我们会发现,当没有样式的情况下,我们是不知道 那白白的按钮是用来干嘛的,至少他连个字都没有,在复杂的页面上面就更是如此了,完全不知道按钮是哪个对应哪个。所以,我们如果考虑得周全,就得考虑这种情况下,怎样让用户都能识别到这个按钮的作用。

这就是把字藏起来的原因。所以 这个起指引作用的velue值不建议去掉。

这种解决方案虽然见效,但是 不建议使用。

让 inline-block 元素 改为 block 元素

同样一个例子:

<!-- html document -->
<form>
	<input class="ipt" type="text"/>
	<input class="btn" type="submit" value="搜索"/>
</form>	

为了让 text-indent 生效,我们可以设置 .btn为块级元素,但是,由于块级元素 和其他元素不会并排在一列,所以我们还得设置这个按钮和其他元素 统一 flaot:left or float:right:

/*css document*/
.ipt{ float:left;}
.btn{ float:left; text-indent:-999em;}	

没错 这样是可以解决,但是,如果我们想将 字和这些搜索内容混排在一起的话 如添加 一个 热门关键字的模块:

我们就得 给这个 模块也设置一个 float:left; 来解决这个问题。

其实我们之所以使用 inline-block,就是为了能让 按钮 和文字能够混排在一块儿,从而提高组件的复用性,用 这种解决方法的话,其实就是大大地降低了 组件的通用性和 复用性了。

用另外的方法把字藏起来

我们可以换一个角度思考,除了 text-indent 可以将字藏起来的话,我们还能通过以下方式把字藏起来

  • 设置 font-size:0;
  • 设置 字体颜色与背景色一致;
  • 设置overflow:hidden;

设置 font-size:0

这种方法的话,在ie7,6下面 当这些字会化成一小点,而不会完全消失掉;而chrome 有个最小字体 font-size:12px 限制 需要设置 webkit 的私有属性 -webkit-text-size-adjust:none;来解决。总的来说,这种方法不是最优解决方案。

设置 字体颜色与背景色一致;

弊端也都显而易见,就是 当背景复杂的时候,这种方法是行不通的。

设置overflow:hidden

我们知道 当我们设置 overflow:hidden 的时候,当我们内容超出 元素的大小时 就会隐藏掉。那我们怎么让字体一个都显示不出来全都属于超出 隐藏范围呢,答案是 padding-left:

沿用上面例子,假设这个按钮的宽度是 49px 的话,那么我们可以这样来设置css 样式:

/*css document*/
.btn{ display:inline-block; *zoom:1; *display:inline; pading-left:49px; width:0; height:20px; text-indent:-999em; background:url(xx.jpg);}	

题外话:

/* css document*/
.inline-block{display:inline-block; *zoom:1; *display:inline;}	

这种写法是用来让 ie6,7也支持 inline-block属性的写法来的

回到主题,这种写法其实是work的,但是,存在局限性,因为这种写法只适合用于非表单元素 如 a,span,div等。而不适合表单元素 如 input,button等

拿 input来做例子,由于表单元素特性,paddiing值不影响 input的 宽度高度,故在渲染 input 元素时, input的 width 还是为0 而不是 width + padding-left 之和。

所以我们得针对 input标签来给个width 值给他:

/* css document*/
.btn{ display:inline-block; *zoom:1; *display:inline; pading-left:49px; width:0; height:20px; text-indent:-999em; background:url(xx.jpg);}	
input.btn{ width:49px;}

通过这种写法我们经过测试后发现,在firefox 和 chrome下面 字还是会显示出一点儿不能完全padding走掉,所以针对这种情况 我们再给 input 设置一个 font-size:0,恭喜,问题解决。

/* css document*/
.btn{ display:inline-block; *zoom:1; *display:inline; pading-left:49px; width:0; height:20px; text-indent:-999em; background:url(xx.jpg);}	
input.btn{ width:49px; font-size:0;}

演示地址: http://www.jackness.org/lab/inline-block-demo/demo.html

例子的源代码:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>inline-block demo</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
body{ -webkit-text-size-adjust:none; font-family:Tahoma,Arial,'\5b8b\4f53',sans-serif;}
form{ display:inline;}
input{ vertical-align:middle;}
.search_area{ padding:5px; background:#1a8ed1; font-size:12px; color:#fff; line-height:20px;}
.search_area a{ color:#ebf2ff; text-decoration:none;}
.search_area a:hover{ color:#fff;}
.search_area .ipt{ height:18px; padding:0 5px; line-height:18px;}
.search_area .btn{ padding-left:49px; width:49px; font-size:0; height:20px; border:none; cursor:pointer;  vertical-align:middle;  background:url(images/search_nav.png) no-repeat; overflow:hidden;}
.
-->
</style>
</head>
<body>

<div class="search_area">
	<form>
		<input class="ipt" type="text"/>
		<input class="btn" type="submit" value="搜索"/>
	</form>
	 
	<strong>热门关键字:</strong>
	<a href="#">关键字一</a>
	<a href="#">关键字一</a>
</div>	
</body>
</html>
分类HTML + CSS
阅读 1,445
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS