0

Mozilla/IE でレイアウトの問題が発生しています。フォーム用に 2 つのテーブルを作成しました。フロート/左右を使用すると、それらは隣り合わせに表示され、正常に機能します。問題は次のとおりです。右の表は、Firefox よりも IE9 の方が約 2 ピクセル高くなっています。何が問題になる可能性がありますか?

私の CSS の下部では、既存のテーブル/td 構成とは別に、テーブルを 2 つの異なるクラスに配置していることがわかります。

ありがとう、エリック

私の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

まず、2 つのブラウザにはデフォルト要素用の異なる内部スタイルシートがあります。まず、CSS リセットを適用する必要があります。いくつかのオプションがあります: http://www.cssreset.com/

また、有効な doctype があることを確認してください。それでも問題が解決しない場合は、コードをさらに詳しく調べることができます。

于 2012-05-18T15:33:43.347 に答える
0

申し訳ありませんが、週末にチェックインしませんでした。修正できましたか？コードを試してみたところ、ブラウザごとに TR の高さが異なります。自分で高さを設定してみませんか？大変な作業だけど… 私だったら、テーブルレスのデザインに切り替えます。これは良い習慣であり、ピクセルパーフェクトにする必要がある場合は、DIV の方がはるかに簡単に処理できます。両方のテーブルを同じ高さにしようとしている場合、両方の高さとして 478px を使用すると Chrome と IE で修正され、FF も機能するはずです。

于 2012-05-21T14:31:26.170 に答える