我正在尝试更新 pfSense 强制门户身份验证页面，除了 IE（桌面版和移动版）之外，它在任何地方都显示得很好。问题是上表行（来自 2 行表）正在扩展到大尺寸，如下图所示。HTML 是：
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<form method="post" action="#PORTAL_ACTION#" align="center" >
<input name="redirurl" type="hidden" value="#PORTAL_REDIRURL#">
<input name="zone" type="hidden" value="#PORTAL_ZONE#">
<center>
<table class="MainTable">
<!--Beginning of Form title heading-->
<tr class="TableTopRow">
<td class="TableTopCell1">
<img src="captiveportal-wifi_icon.png" width="50%" height="3%" align="right">
</td>
<td class="TableTopCell2" >
<img src="captiveportal-aragon_logo.png" width="50%" height="3%" align="left">
</td>
</tr>
<!--End of Form title heading-->
<!--Beginning of main area which contains authentication form and an area reserved for showing errors-->
<tr class="TableLowerRow" colspan="2" height="70%">
<td colspan="2" width="100%">
<div id="mainlevel">
<center>
<table height="100%" width="100%" border="0" cellpadding="0">
<tr>
<td style="color:#0B173B;font-family:arial; font-weight:bold; font-size:90%"><center>
Welcome to Aragon House Business Center
</td>
</tr>
<tr>
<td>
<center>
<div id="mainarea">
<center>
<table width="100%" border="0" cellpadding="1px" cellspacing="2">
<tr height="20%">
<td>
<div id="maindivarea">
<center>
<!-- The statusbox area is where errors will be shown should there be an error when authenticating with the hotspot-->
<div id='statusbox'>
<font color='red' face='arial' size='+1'>
<b>
#PORTAL_MESSAGE#
</b>
</font>
</div>
<!--End of error message area-->
<br />
<!--Beginning of form area; this area will contain fields for authenticating users with the hotspot system-->
<div id='loginbox'>
<table>
<!-- Beginning of area where you input the authentication details-->
<tr><td> </td></tr>
<tr><td align="right" style="color:#333333;font-family:arial; font-size:98%;">Username:</td><td><input name="auth_user" type="text" style="border: 1px solid;"></td></tr>
<tr><td align="right" style="color:#333333;font-family:arial; font-size:98%;">Password:</td><td><input name="auth_pass" type="password" style="border: 1px solid;"></td></tr>
<tr><td> </td></tr>
<tr>
<td align="right" style="color:#333333;font-family:arial; font-size:98%;">Enter Voucher Code: </td>
<td><input name="auth_voucher" type="text" style="border:1px solid;" size="20"></td>
</tr>
<tr>
<td colspan="2" align="right" style="padding-right:10px"><input name="accept" type="submit" value="Continue"></td>
</tr>
<!-- End of area where you input the authentication details-->
</table>
</div>
<!--End of authentication form area-->
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</center>
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
<!--End of main area-->
</form>
</body>
</html>
虽然 CSS 是：
.MainTable{
height: 40%;
width: 30%;
padding: 0;
border-radius: 15px;
border:1px solid #000000;
}
.TableTopRow{
width: 30%;
height: 30%;
background-color:#CCCCCC;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-top:1px #6DA4DE;
}
.TableLowerRow{
height: 70%;
}
.TableTopCell1{
width: 50%;
border-top-left-radius: 15px;
}
.TableTopCell2{
width: 50%;
border-top-right-radius: 15px;
}
第一张图片显示了表单在 IE 中的显示方式，而下图显示了相同表单在 Chrome 中的显示方式。
非常感谢您的帮助。
在此先感谢，