我正在构建的网站的管理员登录表单不能用于Chrome,但它在IE中运行正常。可能是什么导致了这个?我在这里找到了另一个关于类似问题的问题,但它的答案对我不起作用。
预览:http://a.emutek.net/site/admin/
HTML:
<div id="body">
<div class="divhead" id="adminhead">Login to website management:</div>
<div id="adminlogin">
<form name="adminlogon" action="login.do.php" method="post">
<table border="0">
<tr>
<td>
Username:
</td>
<td>
<input type="text" name="user">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</div>
</div>
CSS:
#body {
z-index: -1;
position: relative;
top: -6px;
padding: 7px;
background-color: white;
border-radius: 6px;
}
.divhead{
background-color: #111;
color: #CCC;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
padding: 3px;
margin-bottom: 5px;
border-radius: 6px;
}
#head{
border-radius: 6px;
margin-bottom: -10px;
padding: 5px;
background-image:url('../img/bg_header.png');
}
#adminlogin{
margin-left: 40%;
z-index: 10;
}
#adminhead{
margin-top: 20px;
margin-bottom: 10px;
width: 700px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
}
答案 0 :(得分:2)
删除position: relative;
#body
中的{{1}}
你可以看到它在chrome中的光标也在firefox和safari
中测试过
答案 1 :(得分:1)
不应将#body
定位在#nav
下方,而应将#nav
定位在#body
之上。
#body { 位置:相对; z-index:-1; ... }
#nav{
position: relative;
z-index: 1;
}
答案 2 :(得分:0)
您需要将正文中的z索引css从-1更改为正值
body {
z-index: 1111;
}