Question

我遇到了Mozilla / IE的布局问题。我为表格制作了两张桌子。浮动/向左，它们彼此相邻显示，并且工作正常。现在唯一的问题是：IE9中的右表大约比firefox大两个像素。可能是什么问题？

在CSS的底部，您可以看到我将表放在除现有表/ td配置之外的两个不同的类中。

谢谢和问候，Eric

我的CSS：

       body {font-family: Century Gothic, Arial; text-align:center; margin: 0 auto; background-color: #CCCCCC;}

table {display:table; margin:0px 0; padding:0; border:1px solid #000000; font-size:100%;}
tr {display:table-row;}
th, td {display: table-cell; border:0px solid #000000; margin:0; padding:5px; vertical-align:top; text-align:left;}
th {background:#E7ECFD; text-align:center; color:#192666; font-weight:bold;}

hr { border: 0; color: #000000; background-color: #000000; height: 1px; width: 100%; text-align: left;} 

a {color: #0B0080;}
a:hover {color: #ffffff;}

img {border:0;}

#header {font-size: 60px;color: #333333;}

#menu {width:1000px; padding-top:10px; padding-bottom:10px; text-align:left; margin-top:10px; margin-bottom:10px; }
#menu_left {text-align:left; float:left; font-weight: bold;}
#menu_right {text-align:right; font-size:75%;}

#content {width: 1000px; margin: 20px auto 0px auto; text-align:center;}

#main { float: left; height:650px; width:1000px; background-color: #CCCCCC; font-size: 14px; color: #000000; text-align:left;}

.sidebar {width:300px; height: 600px; float: right; background-color: #CCCCCC; font-size: 18px; color: #000000; margin-top:10px; padding-top:20px;}

.footer {font-size: 14px; color:#333333; text-align:center;}

table.table_register {  border:1px solid #000000; padding:10px; float:left; width:50%; font-size:100%;
border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-right:0px;
-moz-border-radius: 15px 0px 0px 15px;
-webkit-border-radius: 15px 0px 0px 15px;}

table.table_register2 { border:1px solid #000000; padding:10px; float:right; width:50%; font-size:100%;
border-top-right-radius: 15px; border-bottom-right-radius: 15px;
-moz-border-radius: 0px 15px 15px 0px;
-webkit-border-radius: 0px 15px 15px 0px;}

td.submit {display: table-cell; border:0px solid #000000; margin:0; padding:10px; 
 text-align:right; vertical-align:top; }

tr.test { height: 182px;}

我的标题：

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="http://localhost/webwinkel/assets/css/style.css">

</head>
<body>

<div id="content">

    <div id="header">
    </div>

    <div id="menu">

        <div id="menu_left">
            <a href="http://localhost/webwinkel/public/index">Home</a> |  
            <a href="http://localhost/webwinkel/public/games">Games</a> | 
            <a href="http://localhost/webwinkel/public/movies">Movies</a>
        </div>  
        <div id="menu_right">   
            {if !isset($smarty.session.logged_in)}      
            <a href="http://localhost/webwinkel/public/member/login">Login</a> |
            <a href="http://localhost/webwinkel/public/member/register">Registratie</a>
            {/if}

            {if isset($smarty.session.logged_in)}
            Welkom {$smarty.session.name}! <a href = http://Localhost/webwinkel/public/member/logout>Uitloggen</a>
            {/if}           
        </div> 
    </div>

    <hr>

    <div id="main">

我的表格：

<form action="" method="post">
<table class="table_register">
    <tr>
        <td colspan="2"><strong>Persoonlijke gegevens</strong><br>
        Velden met een * zijn verplicht.
        </td>
    </tr>
    <tr>  
        <td>Titel:</td>
        <td><input type="radio" name="title" value="m">Dhr.
            <input type="radio" name="title" value="f">Mevr. *
        </td>
    </tr>
    <tr>
        <td>Voornaam:</td>
        <td><input type="text" name="name"> *</td>
    </tr>
    <tr>    
        <td>Tussenvoegsel</td>
        <td><input type="text" name="name_connection"></td>
    </tr>
    <tr>
        <td>Achternaam:</td>
        <td><input type="text" name="surname"> *</td>
    </tr>
    <tr>
        <td>Postcode:</td>
        <td><input type="text" name="postal_code"> *</td>
    </tr>
    <tr>
        <td>Straatnaam</td>
        <td><input type="text" name="street"> *</td>
    </tr>
    <tr>
        <td>Huisnummer:</td>
        <td><input type="text" name="house_number"> *</td>
    </tr>  
    <tr>
        <td>Woonplaats:</td>
        <td><input type="text" name="city"> *</td>
    </tr>
    <tr>
        <td>Telefoonnummer:</td>
        <td><input type="text" name="phone_home"> *</td>
    </tr>
    <tr>
        <td>Telefoon mobiel:</td>
        <td><input type="text" name="phone_mobile"> *</td>
    </tr>
    <tr height="30">
        <td colspan="2">&nbsp;</td>
    </tr>
</table>

<table class="table_register2">
    <tr>
        <td colspan="2"><strong>inloggegevens</strong> <br>
        Uw e-mailadres en wachtwoord heeft u nodig om toegang te krijgen tot uw gegevens. 
        Tevens zullen we u via dit e-mailadres op de hoogte houden van de status van uw bestellingen. 
        </td>
    </tr>
    <tr>
        <td>E-mailadres:</td> 
        <td><input type="text" name="email"></td> 
    </tr>
    <tr>
        <td>Wachtwoord:</td> 
        <td><input type="password" name="password"></td> 
    </tr>
    <tr>
        <td>Wachtwoord herhalen:</td> 
        <td><input type="password" name="retype_password"></td>
    </tr>
    <tr class="test">
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td class="submit"><input type="submit" name="register" value="Verzenden"></td> 
    </tr>
</table>
</form>

和页脚：

    </div>

    <div class="sidebar">
    </div>

<div class="footer">

&copy;2012 by Eric Versteeg.
</div>

</div>
</body>
</html>

Answer 1

首先，2个浏览器具有默认元素的不同内部样式表。您应该首先应用CSS重置。这里有几个选项：http://www.cssreset.com/

另外，请确保您拥有有效的doctype。如果这没有帮助，我们可以深入了解您的代码。

Answer 2

对不起，我没有在周末办理入住手续。你能解决它吗？我尝试了代码，每个浏览器为你的TR设置了不同的高度。为什么不尝试自己设定高度？这是很多工作......如果我是你，我会转而采用无桌面设计。这是一个很好的做法，当你需要像素完美的东西时，DIV更容易处理。如果你想要做的就是让两个表都达到相同的高度，那么使用478px作为两者的高度将为Chrome和IE修复它，FF也应该起作用。

表格在Firefox和IE9中可见约2个像素的高度差异

2 个答案: