css的问题是什么？

Question

CSS

.help {
    background: url("/images/info.png") no-repeat scroll center center transparent;
    cursor: pointer;
    height: 16px;
    line-height: 16px;
    margin: 0 5px;
    padding: 2px 8px;
    text-indent: -100px;
}

HTML

1）

<label for="test_1">City Name Sub
   <span title="City Name Sub" class="help">&nbsp;</span>
</label>

2）

<label for="test_2">SMMMC 
   <span title="SMMC Sub" class="help">&nbsp;</span>
</label>

第一个标签显示带有文字的正确图像。但是对于第二个标签在IE中从顶部获得裁剪图像。 任何的想法 ？任何解决方案？

Answer 1

我不知道你的影像是什么样的，但这对你有帮助吗？

CSS（已编辑的背景和文字缩进属性）

.help {
    background: url("/images/info.png") no-repeat scroll right center transparent;
    cursor: pointer;
    height: 16px;
    line-height: 16px;
    margin: 0 5px;
    padding: 2px 8px;
}

HTML

<label for="test_1" class="help" title="City Name Sub">City Name Sub</label>

Answer 2

.help {
    background: url("/images/info.png") no-repeat scroll center center transparent;
    cursor: pointer;
    height: 16px;
    line-height: 16px;
    margin: 0 5px;
    padding: 2px 8px;
    text-indent: -100px;
    display: inline-block;
}

我已将display：inline-block添加到我的css类中并且它可以正常工作。