今天在学习滑动门样式的时候，写了一段代码但是鼠标经过时就是不出下划线，因此围绕这个问题开始了一点思考，具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计滑动门样式</title>
<style type="text/css">
#button{
width:1000px;
margin:50px auto;
}
a{
color:white;
font:13px bold Airal;
display:block;
float:left;
margin-right:10px;
height:30px;
line-height:22px;
background:url(images/left1.gif) no-repeat top left ;
padding-left:8px;
text-decoration:none;
}
a span{
display:inline-block;
padding:4px 10px 4px 2px;
background:url( images/right1.gif) no-repeat top right;
}
a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="button">
<a href="#"><span>按钮</span></a>
<a href="#"><span>长按钮</span></a>
<a href="#"><span>超长按钮</span></a>
<a href="#"><span>超长超长按钮</span></a>
<a href="#"><span>超长超长超长按钮</span></a>
</div>
</body>
</html>
在浏览其中的显示效果：
浏览器效果.jpg
但是把span从行内块元素改为块元素后，就会出现下划线。
a span{
display:block;
padding:4px 10px 4px 2px;
background:url( images/right1.gif) no-repeat top right;
}
浏览器效果1.jpg
经过在度娘上的搜索，然而并没有得到答案。
最后去询问了一位前端老师，老师的回答的确给了一些启发（很感谢），回答内容具体是：
这个可能是渲染规则问题，块和行内块显示不能够相互影响，需要各自定义。
a span {
display: inline-block;
}
a:hover span { text-decoration: underline; }
这样可以
具体原因不明，仅是推测
因为行内块比较特殊，早期IE没有敢支持它，就怕它混乱了布局规则
听了老师说的后，我去试了试果然有效，但我又把a标签改为inline-block，span标签改为block，发现可以在浏览器中显示下划线，经过了一番折腾我列了一个表格：
影响关系.png
从表格中我们可以看出：只有block对block或inline-block对block产生影响，其它的都不会产生。
因此使用的时候尽量不让他们产生影响，各自定义它们（用法参考老师的回答） ！
声明：此文只代表个人见解，只供参考！联系QQ：1522025433
