0

我遇到了 Mozilla/IE 的布局问题。我做了两个表格，作为一个表格。使用浮动/左右，它们彼此相邻显示，效果很好。现在唯一的问题是：右表在 IE9 中比在 Firefox 中高出大约两个像素。可能是什么问题？

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

谢谢和问候，埃里克

我的 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>
4

2 回答 2

1

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

另外，请确保您拥有有效的文档类型。如果这没有帮助，我们可以更深入地研究您的代码。

于 2012-05-18T15:33:43.347 回答
0

对不起，我没有在周末入住。你能修好它吗？我尝试了代码，每个浏览器都为您的 TR 设置了不同的高度。为什么不尝试自己设置高度？工作量很大……如果我是你，我会改用无桌子的设计。这是一个很好的做法，当您需要像素完美时，DIV 更容易处理。如果您要做的只是让两个表格的高度相同，则使用 478px 作为两者的高度将为 Chrome 和 IE 修复它，FF 也应该可以工作。

于 2012-05-21T14:31:26.170 回答