Maison > interface Web > tutoriel HTML > ie7下相对定位为什么无效?_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 12:14:54
original
1436 Les gens l'ont consulté

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>
Copier après la connexion


回复讨论(解决方案)

.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>
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal