日期:2014-05-17  浏览次数:20664 次

div中top和height使用百分比无效的问题
各位高手,小弟新手请教一个比较低级的问题
我在login.jsp中使用div将几个text框和一个botton定位到背景图上相应的位置。但是我在css中对height和top使用百分比时无效,但使用像素又是可以的。我百度了该情况,一般都说是因为IE默认body的height为空的,必须定义body的height才可以。但我已定义了body的height为了100%,仍然无效。只好请教各位高手了。下面是具体的代码:

css文件中作了几个定义:
.loginBg{
background-repeat:no-repeat;
background-position:center top;
background-image:url(../images/loginBackGroud.jpg); 
background-attachment:fixed;
    margin: 0px;
width:100%;
height:100%;
}
.loginTableTop{
position:relative;
float:center;
top:14.29%;
/*top:100px;*/
width:50%;
height:53.57%;
z-index:999;
background-color:green;
}
.loginTable{
position:relative;
float:center;
left:0%;
top:46.86%;
/*top:328px;*/
width:30%;
height:17.86%;
/*height:125px;*/
z-index:999;
background-color:red;
}
.loginTableBottom{
position:relative;
float:center;
width:80%;
heigth:32.86%;
top:500px;
z-index:999;
background-color:blue;
}


我在login.jsp文件中是这样使用的
<html>
<body class="loginBg">
<center>
<form action="/OfficeInformationPlatForm/login.action" method="post">
        <table border="0" align="center" class="loginTableTop">
            <tr>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
        <table border="0" align="center" class="loginTable">
            <tr>
                <td>
                    <div id="d0" style="position:relative; width:10%; height:21.43%; z-index:999; top:0%; left:0%; overflow-scroll; overflow-scroll;">
<table style="table-layout:fixed">    
<tr>
<td>
 <input name="userName" type="text" class="inputTextStyle">
</td>
</tr>
</table>
             </div>
     <div id="d1" style="position:relative; width:10%; height:21.43%; z-index:999; top:36.03%; left:0%; overflow-scroll;overflow-scroll;">
<table style="table-layout:fixed">
    <tr>
<td>
    <input name="userPassword" type="password" class="inputTextStyle" onKeyPress="processKey(event);">
</td>
    </tr>
</table>
    </div>
    <div id="d2" style="position:relative; width:10%; height:21.43%; z-index:999; top:77.8%; left:0%; overflow-scroll;