我有 2 个 span 标签,它们有一个标签作为画廊的按钮并定位它们,我正在使用 display:block。除了 IE7,它在所有浏览器中都可以正常工作。两个按钮都移到了画廊的右侧。这是我为他们使用的 CSS 代码:
.prv_button{
float:left;
height:227px;
width:15px;
position:absolute;
display:block;
overflow: hidden;
}
.prv_button a{
background-image:url(../images/gal_prv.jpg);
background-repeat:no-repeat;
height:227px;
width:15px;
display:block;
position:relative;
overflow: hidden;
}
.nxt_button{
height:227px;
width:15px;
float:left;
position:absolute;
display:block;
overflow: hidden;
left:432px;
}
.nxt_button a{
background-image:url(../images/gal_nxt.jpg);
background-repeat:no-repeat;
height:227px;
overflow: hidden;
width:15px;
display:block;
position:relative;
}
如果您需要更多信息,请告诉我。
谢谢。
最佳答案
我不确定我是否理解您要实现的目标,但在我看来您可以在不 float 任何东西、使用绝对定位或将图像显示为背景的情况下做到这一点。我假设 .outer_gwrap
有 display:inline-block;
CSS:
.prv_button{
display:inline-block;
vertical-align:top;
width:15px;
}
.prv_button a{
vertical-align:top;
}
.prv_button img{
border-width:0px;
}
.nxt_button{
display:inline-block;
vertical-align:top;
width:15px;
}
.nxt_button a{
vertical-align:top;
}
.nxt_button img{
border-width:0px;
}
.outer_gwrap{
display:inline-block;
width:834px;
zoom: 1;
*display: inline;
}
HTML:
<div class="gallery" >
<span class="prv_button">
<a href=""><img src="../images/gal_prv.jpg"></a>
</span>
<div class="outer_gwrap">
<ul class="inner_gwrap">
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
</ul>
<ul class="inner_gwrap">
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
<li><a target="_blank" href=""><img border="0" src=""></a></li>
</ul>
</div>
<span class="nxt_button">
<a href=""><img src="../images/gal_nxt.jpg"></a>
</span>
</div>
关于html - IE7显示:block,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9637252/