在button（div）里设置背景图后，在IE6下背景图的高度被撑开了

         在一个button里，设置一张背景图，在IE6下看，背景图多了一些空白高度。这个与“在div里面设背景图不一样”的情况不同，在这里，不能在背景图的class里面加“ _font-size:0;”，这里需要加“display: block;”

   <div class="buttonDiv">
        <input type="button" class="buttonClass" />
    </div>

css样式：

      .buttonDiv
        {
            width: 9px;
            height: 9px;
            border: 1px solid red;
        }
        .buttonClass
        {
            width: 9px;
            height: 9px; 
             _display: block;
               border-style: none;
            background: url("../images/close.gif") no-repeat;
        }

                                     IE6下的情况：     IE6以上的情况：

注意：IE6下空白地方在上面

 

在div里面设背景图,在IE6下背景图的高度被撑开了，解决方案：加font-size:0;

<div class="buttonDiv">
        <div class="buttonClass">
        </div>
    </div>

css样式：

  .buttonDiv
        {
            width: 9px;
            height: 9px;
            border: 1px solid green;
        }
        .buttonClass
        {
            width: 9px;
            height: 9px;
            _font-size:0;
            border-style: none;
           background: url("../images/close.gif") no-repeat;        }

                                   IE6下的情况：           IE6以上的情况：

注意：IE6下空白地方在下面

转载于:https://www.cnblogs.com/dreamhouse/archive/2013/03/14/2960531.html