ie7上相对定位为什么无效 _HTML/CSS

ie7下相对定位为什么无效？
ie7下相对定位为什么无效？

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{padding:20px;}
        .btns_line {
            padding-bottom:1px;
            text-align:center;
            word-spacing:-6px;
        }
        .btn{
            position:relative;
            display:inline-block;
        }
        .btn:hover{
            top:1px;
        }
        .btn_wood{background-color:tan;margin-left:5px;}
        
    </style>
    <div class="btns_line">
        <a href="#" class="btn btn_wood"><span><em class="icon"></em>Keep Me in</span></a>
        <a href="#" class="btn btn_wood"><span><em class="icon"></em>Keep Me in</span></a>
    </div>
</body>
</html>

------解决方案--------------------
.btn{
position:relative;
}
.btn:hover{
top:1px;
display:inline;
}
------解决方案--------------------

HTML code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{padding:20px;}
        .btns_line {
            padding-bottom:1px;
            text-align:center;
            word-spacing:-6px;
        }
        .btn{
            position:relative;
            display:inline-block;
        }
        .btn a:hover{
            top:1px;
        }
        .btn_wood{background-color:tan;margin-left:5px;}
        
    </style>
    <div class="btns_line">
        <a href="#" class="btn btn_wood"><span><em class="icon"></em>Keep Me in</span></a>
        <a href="#" class="btn btn_wood"><span><em class="icon"></em>Keep Me in</span></a>
    </div>
</body>
</html>