IE6\7bug之 inline元素text-indent导致元素本身位置偏移
bug描述：IE6\7中对inline元素（本身就是inline元素或者通过设置display为inline的block元素）应用text-indent，text-indent会传递到父元素，导致该元素本身位置偏移
应用场景：在制作一组精美的横排按钮时，我们通常用float:left或者display:inline-block;
*display:inline;*zoom:1;来让一组按钮横排显示，为了按钮的美观我们需要用设计精美的ico图标代替按钮上的文字，于是又设置text-indent来把按钮上的文字推出按钮之外，在IE6\7下，当
*display:inline;*zoom:1遇到text-indent时，text-indent会作用于按钮本身。
情景再现：
我们需要这样一组横排显示的按钮
代码如下：
1 <style type="text/css">
2 .demo {
3 width: 100%;
4 height: 50px;
5 margin: 10px 0;
6 background: #9C9;
7 }
8 .demo div {
9 background: #09F;
10 width: 60px;
11 height: 30px;
12 display: inline-block;
13 *display:inline;
14 *zoom:1;
15 white-space: nowrap;
16 margin-right:1px;
17 }
18
19 </style>
20
21 <div class="demo demo1">
22 <div>按钮1</div><div>按钮2</div><div>按钮3</div>
23 </div>
2 .demo {
3 width: 100%;
4 height: 50px;
5 margin: 10px 0;
6 background: #9C9;
7 }
8 .demo div {
9 background: #09F;
10 width: 60px;
11 height: 30px;
12 display: inline-block;
13 *display:inline;
14 *zoom:1;
15 white-space: nowrap;
16 margin-right:1px;
17 }
18
19 </style>
20
21 <div class="demo demo1">
22 <div>按钮1</div><div>按钮2</div><div>按钮3</div>
23 </div>
按钮文字太丑，于是我们要把文字隐藏起来然后用背景图片，利用text-indent把文字推出按钮范围之外，代码如下：
1 <style type="text/css">
2 /*接上面样式*/
3 .demo2 div {
4 text-indent: 50px;
5 }
6 </style>
7
8 <div class="demo demo2">
9 <div>按钮1</div><div>按钮2</div><div>按钮3</div>
10 </div>
2 /*接上面样式*/
3 .demo2 div {
4 text-indent: 50px;
5 }
6 </style>
7
8 <div class="demo demo2">
9 <div>按钮1</div><div>按钮2</div><div>按钮3</div>
10 </div>
把文字推出按钮范围之外我们预期的效果是这样的：
然而在IE6\7下我们看到的确实这样子的：
显然，text-indent也作用于按钮本身了
bug修复：
我们利用text-inden是为了隐藏按钮上的文字，不设置text-indent通过其他方式同样可以达到这个目的，设置该按钮的font-size和line-height为0，这样按钮上的文字同样也能被隐藏
1 <style type="text/css">
2 /*接上面样式*/
3 .demo3 div {
4 font-size: 0;
5 line-height: 0;
6 }
7 </style>
8 <div class="demo demo3">
9 <div>按钮1</div><div>按钮2</div><div>按钮3</div>
10 </div>
2 /*接上面样式*/
3 .demo3 div {
4 font-size: 0;
5 line-height: 0;
6 }
7 </style>
8 <div class="demo demo3">
9 <div>按钮1</div><div>按钮2</div><div>按钮3</div>
10 </div>
效果如下：
另外一种方法是在按钮元素前面添加一个空格符
1 <div class="demo demo2">
2 <div>按钮1</div><div>按钮2</div><div>按钮3</div>
3 </div>
2 <div>按钮1</div><div>按钮2</div><div>按钮3</div>
3 </div>
这种方法不够灵活
