我有一个简单的按钮(如下所示),我需要显示两个图片,一个在按钮文本的两边.我打算创建可以在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>
预习
火狐
alt text http://i44.tinypic.com/auh7v7.jpg
Internet Explorer 8
解决方法
这是怎么做到的
理论
块元素(如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
