[英]Misalignment of links in Chrome and Safari
我正在尝试使用左侧和右侧的链接创建水平导航。
左侧的项目似乎没有3px的垂直填充,因此垂直对齐到DIV的顶部,而右侧的项目则正确地垂直对齐。
这种情况在Chrome和Safari中发生,但在Firefox中不发生。
谁能告诉我我做错了什么或需要做些什么才能使Chrome在不改变Firefox行为的情况下正常工作。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test Navigation</title>
<style>
* { border: red solid 1px; }
div { border: green solid 1px; }
body { width: 90%; margin-left: 5%; }
body { background-color: #EEEEEE; color: #FFFFFF; }
#navFull { background-color: #DDDDDD; color: #222222;
margin: 1px;
padding: 3px;
overflow: auto;
}
#navFull a { background-color: #222222; color: #DDDDDD;
padding: 3px 7px;
text-decoration: none;
border: white solid 1px;
}
#navFull a:link {}
#navFull a:visited {}
#navFull a:hover {background-color: #DDDDDD; color:#222222; }
#navFull a:active {}
</style>
</head>
<body>
<div id=pgFull>
<div id=navFull>
<span id=navLeft>
<a href=#> Albums </a>
<a href=#> Tags </a>
</span>
<span id=navRight style="float:right;"><a href=#> Contact </a>
<a href=#> Help </a>
<input type="button" value=" styled text button "
style="background-color:#c00; color:#fff;" />
</span>
</div>
</div>
</body>
</html>
左右导航都有您的3px填充。
差异是由于您输入到具有默认边距的右侧导航中的元素。 只需为您的输入添加一个CSS:
#navFull input{
margin:0px;
}
现在,如果您将padding:3px调整为更高的值,则左和右将始终受到相同的影响。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.