将图像放在BUTTON元素内(HTML和CSS)

Question

我有一个简单的按钮(如下所示),我需要在其上显示两个图片,一个在按钮文本的两侧.我正在努力创建可以在Firefox和Internet Explorer中使用的CSS!(按钮图像来自JQuery UI皮肤文件)

CSS

button div{
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_d19405_256x240.png);      
}

button div.leftImage{
    background-position: -96px -112px;
    float: left;
}

button div.rightImage{
    background-position: -64px -16px;
    float: right;
}

HTML

<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>

预习

火狐

替代文字http://i44.tinypic.com/auh7v7.jpg

Internet Explorer 8

替代文字http://i39.tinypic.com/16234g1.jpg

Answer 1

这是怎么做的

理论

块元素(如DIV)虽然按创建顺序显示,但它们会将自己定位在前一个元素旁边,或者在空格不足时,在下一行.因为我们不想给按钮一个宽度(我们希望按钮根据按钮的内容自动调整大小),块元素继续出现在下一行(参见上面问题中的IE8图像).使用white-space:nowrap强制内联元素(如SPAN和EM)显示在同一行上,但被块元素忽略,因此下面的解决方案.

CSS

button{
    margin: 0px;
    padding: 0px;
    font-family:Lucida Sans MS, Tahoma;
    font-size: 12px;
    color: #000; 
    white-space:nowrap;
    width:auto;
    overflow:visible;
    height:28px;
}

button em{
    vertical-align:middle;
    margin:0 2px;
    display:inline-block;
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_3d3d3d_256x240.png);      
}

button em.leftImage{
    background-position: -96px -112px;
}

button em.rightImage{
    background-position: -64px -16px;
}

HTML

<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>

结果

Internet Explorer 6,7,8和Firefox 1.5,2,3

替代文字http://i40.tinypic.com/14d0l86.jpg