图片之间有空白条条是怎么回事
提示框的页面源码如下:
HTML code<table class="MessageBox" align="center" width="500">
<tr class="head">
<td class="left"></td>
<td class="center">
<div class="title">提示</div>
</td>
<td class="right"></td>
</tr>
<tr class="msg">
<td class="left"></td>
<td class="center info">
<div class="msg-content">请选择用户,只能查询您管理范围内的,角色序号在您之后的用户</div>
</td>
<td class="right"></td>
</tr>
<tr class="foot">
<td class="left"></td>
<td class="center"></td>
<td class="right"></td>
</tr>
</table>
相关的样式如下:
CSS code/* 提示框样式 */
.MessageBox{
}
/* 表头 */
.MessageBox .head{
height:32px;
overflow:hidden;
}
.MessageBox .head .left{
width:20px;
background:url('images/message_bg.png') left 0px no-repeat;
}
.MessageBox .head .center{
padding:0px;
background:url('images/message_bg.png') 0px -32px repeat-x;
}
.MessageBox .head .center .title{
float:left;
color:#fff;
font-size:16px;
font-weight:bold;
margin-top:5px;
}
.MessageBox .head .right{
width:20px;
background:url('images/message_bg.png') right 0px no-repeat;
}
/* 表头 */
.MessageBox .head-no-title{
height:16px;
}
.MessageBox .head-no-title .left{
width:20px;
background:url('images/message_bg.png') left -96px no-repeat;
}
.MessageBox .head-no-title .center{
background:url('images/message_bg.png') 0px -112px repeat-x;
}
.MessageBox .head-no-title .right{
width:20px;
background:url('images/message_bg.png') right -96px no-repeat;
}
/* 按钮栏 */
.MessageBox .control{
height:40px;
vertical-align:top;
}
.MessageBox .control .left{
width:20px;
background:url('images/message_center_bg.png') left top repeat-y;
}
.MessageBox .control .center{
background-color:#7bafe6;
text-align:center;
}
.MessageBox .control .right{
width:20px;
background:url('images/message_center_bg.png') right top repeat-y;
}
/* 表底 */
.MessageBox .foot{
height:16px;
}
.MessageBox .foot .left{
width:20px;