2
Я пытаюсь обновить страницу аутентификации портативного портала pfSense, и она отображается везде , за исключением IE (как настольных, так и мобильных версий). Проблема заключается в том, что верхняя строка таблицы (из таблицы из 2 строк) расширяется до большого размера, как видно на изображении ниже. HTML является:Проблема с высотой HTML/CSS с IE
<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.
справка приветствуется.
Спасибо заранее, J
какая версия IE? Для IE 11 работает нормально https://jsfiddle.net/fqzfbw39/ –
@ SrinivasPai-Im, используя версию 11, однако я Я попытался воспроизвести проблему на jsfiddle с IE 11, как и вы, и это сработало нормально. Это когда я пытаюсь открыть его в фактическом браузере, который он не может загрузить, как предполагалось. – joebegborg07