IE

时间：2015-07-27 12:30:23

标签： html css internet-explorer pfsense

我正在尝试更新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>&nbsp;</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>&nbsp;</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;
}

The following shows how the page appears in IE

This image shows how the page appears in chrome

第一张图片显示了表单在IE中的显示方式，而下面的图片显示了Chrome中同一表单的显示方式。

非常感谢帮助。

提前致谢， Ĵ

3 个答案:

答案 0 :(得分：1)

您有 6开场 <center>和 5结束 </center>。 IE可能不够智能，无法为您正确关闭它：D

答案 1 :(得分：0)

Why your css might not be working

添加display: inline;通常可以修复IE中的这些错误，具体取决于您所使用的版本

您还错过了修复IE中很多问题的doctype Quirksmode IE CSS Fix

将它放在html页面的顶部

<!DOCTYPE html>

虽然我们喜欢这样的事情，但你应该将你的css放在外部文件而不是混合和匹配。在这个时代，使用桌子进行造型是不好的做法

<div id='loginbox'>
   <table>
      <!-- Beginning of area where you input the authentication details-->
      <tr>
         <td>&nbsp;</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>&nbsp;</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>

答案 2 :(得分：0)

显然问题是图像尺寸，需要以像素为单位而不是百分比。

相关问题
最新问题