ie7下相对定位为什么无效？_html/css_WEB-ITnose-html tutorial-php.cn

ie7下相对定位为什么无效？_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 12:14:54

asal

1423 orang telah melayarinya

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

<!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>

Salin selepas log masuk

回复讨论(解决方案)

.btn{
position:relative;
}
.btn:hover{
top:1px;
display:inline;
}

relative无法对block元素起效？

<!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>

Salin selepas log masuk