Die schriftart sieht anders aus im IE als in Firefox und Chrome...warum?

Ich bin erstellen einer website und die schriftart sieht anders aus, im IE (es ist größer), als es in Firefox und Chrome. Weiß jemand, warum? Und wie behebe ich es im IE?

Hier ist mein code:

  <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" >

<title> Cameron Cookies </title>

</head>


<body background="back-225.gif">
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cameron Cookies</h1>

<h2 style="font-style: italic; text-align: center;">The best homemade cookies in New England</h2>

<p style="text-align: center;">99 Sycamore St. Portland, ME 04101 (207) 555-1212</p>

<table width="500" border="0">
    <tr>
        <td align="center"><a href="about.htm">About Us</a></td>
        <td align="center"><a href="mailto:[email protected]">Contact Us</a></td>
        <td align="center"><a href="orderform.htm">Place an Order</a></td>
        <td align="center"><a href="recipe.htm">Sample Recipe</a></td>
    </tr>
</table>

<form name="Web Order Form" id="Web Order Form">
<!--this is the main table -->
<table border="0" width="65%" cellpadding="2">
<!--Personal Info. table -nested table 1 -->
    <tr>
        <th colspan="2" align="left">Personal Information</th>
    </tr>

    <tr> 
        <td style="width: 5px;"><label for="fname">First Name:</label></td> 
        <td><input name="fname" id="fname" size="30" type="text" /></td>
    </tr> 

    <tr>
        <td><label for="lname">Last Name:</label></td>
        <td><input name="lname" id="lname" size="30" type="text" /></td>
    </tr>

    <tr>
        <td><label for="address">Address:</label></td>
        <td><input name="address" id="address" size="30" type="text" /></td>
    </tr>

    <tr>
        <td><label for="city">City:</label></td>
        <td><input name="city" id="city" size="35" type="text" /></td>
    </tr>

    <tr>
        <td><label for="state">State:</label></td>
        <td><input name="state" id="state" size="3" type="text" /></td>
    </tr>

    <tr>
        <td><label for="zip">Zip Code:</label></td>
        <td><input name="zip" id="zip" size="10" type="text" /></td>
    </tr>

    <tr>
        <td><label for="country">Country:</label></td>
        <td><input name="country" id="country" size="10" type="text" /></td>
    </tr>

    <!--Order Info. table -nested table 2 -->
    <!--This is the first nested table within the main table -->
            <table border="2" width="65%" cellpadding="2">
            <!--Row 1 -->
                    <tr>
                        <th colspan="3" align="left">Order Information</th>
                    </tr>
            <!--Row 2 -->   
                    <tr>
                        <td width="5">QTY</td>
                        <td></td>
                        <td></td>
                        <td>Subtotal</td>
                        <td width="75%"><input name="Gift Wrapping" id="Gift Wrapping" type="checkbox" /> Gift wrapping? (Additional charge of 1.95 per box)</td>
                    </tr>
            <!-- Row 3 -->  
                    <tr>
                        <td><input name="quantitya" id="quantitya" size="3" type="textbox" value="0"/></td>
                        <td width="50%"></td>
                        <td width="50%" align="left"><label for="subtotala">Chocolate Nut - $10.99</label></td>
                        <td><input name="subtotala" id="subtotala" size="10" type="textbox" value="0"/></td>
                        <td >If yes, note the text for the gift card:</td>
                    </tr>
            <!-- Row 4 -->  
                    <tr>
                        <td><input name="quantityb" id="quantityb" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotalb">Chocolate Chip - $9.99</label></td>
                        <td><input name="subtotalb" id="subtotalb" size="10" type="textbox" value="0"/></td>
                        <td ><textarea wrap="soft" name="giftcardtext" id="giftcardtext" rows="3" cols="20" ></textarea></td> 
                    </tr>
            <!--Row 5 -->
                    <tr>
                        <td><input name="quantityc" id="quantityc" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotalc">Macadamia Nut - $12.99</label></td>
                        <td><input name="subtotalc" id="subtotalc" size="10" type="textbox" value="0"/></td> 
                    </tr>
            <!--Row 6 -->
                    <tr>
                        <td><input name="quantityd" id="quantityd" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotald">Oatmeal Raisin - $10.99</label></td>
                        <td><input name="subtotald" id="subtotald" size="10" type="textbox" value="0"/></td> 
                    </tr>
            <!--Row 7 -->
                    <tr>
                        <td><input name="quantitye" id="quantitye" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotale">Chocolate Dessert - $10.99</label></td>
                        <td><input name="subtotale" id="subtotale" size="10" type="textbox" value="0"/></td></td>
                        <td>Shipping:</td>
                        <td></td>
                        <td width="15000">$5.95 for 1-5 boxes, $10.95 for five or more boxes</td>
                    </tr>
            <!--Row 8 -->
                    <tr>
                        <td><input name="quantityf" id="quantityf" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotalf">Butter - $7.99</label></td>
                        <td><input name="subtotalf" id="subtotalf" size="10" type="textbox" value="0"/></td></td>
                        <td><label for="totala">Total:</label></td>
                        <td></td>
                        <td><input name="totala" id="totala" size="3" type="textbox" value="0.00" /></td>
                    </tr>
            <!--Row 9 -->
                    <tr>
                        <td></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotalg">Subtotal</label></td>
                        <td><input name="subtotalg" id="subtotalg" size="10" type="textbox" value="0" /></td></td>
                    </tr>
            </table>


<!--Payment Info. -nested table 3 -->
    <!--This is the second nested table within the main table -->
                    <table border="0" width="65%" cellpadding="2" cellspacing="5">
            <!--Row 1 -->
                            <tr>
                                <th align="left">Payment Information</th>
                            </tr>
            <!--Row 2 -->
                            <tr>
                                <td><input name="Mastercard button" id="Mastercard button" type="radio" />MasterCard</td>
                                <td><input name="Visa button" id="Visa button" type="radio" />Visa</td>
                            </tr>
            <!--Row 3 -->
                            <tr>
                                <td><label for="ccnum">Credit Card Number</label></td>
                                <td><input name="ccnum" id="ccnum" size="30" type="textbox" /></td>
                            </tr>
            <!--Row 4 -->
                            <tr>
                                <td>Expiration</td>
                                <td><select name="Month" id="Month">
                                        <option>January</option>
                                        <option>February</option>
                                        <option>March</option>
                                        <option>April</option>
                                        <option>May</option>
                                        <option>June</option>
                                        <option>July</option>
                                        <option>August</option>
                                        <option>September</option>
                                        <option>October</option>
                                        <option>November</option>
                                        <option>December</option>
                                    </select>
                                    <select name="year" id="year">
                                        <option>2002</option>
                                        <option>2003</option>
                                        <option>2004</option>
                                        <option>2005</option>
                                        <option>2006</option>
                                        <option>2007</option>
                                        <option>2008</option>
                                        <option>2009</option>
                                        <option>2010</option>
                                        <option>2011</option>
                                        <option>2012</option>
                                    </select>
                                </td>
                            </tr>
            <!--Row 5 -->
                            <tr>
                                <td><input name="submit button" id="submit button" type="submit" value="SUBMIT" /></td>
                            </tr>
                    </table>
</table>
</form>

Dank!

InformationsquelleAutor Ashley | 2010-02-17

  1. 2

    Definieren Sie eine Schriftgröße-Stil:

    <style type="text/css">
body{ font-size:medium; }
</style>

    Könnte man versuchen zu definieren, in Pixel zu mehr Konsistenz:

    <style type="text/css">
body{ font-size:10px; }
</style>

    Code würde gehen in Ihre html <head>

    dies funktionierte Dank. Aber ich habe eine Frage - ich habe es zwischen den <head> - tags oder lege ich es direkt in den head-tag? Auch, wenn ich dies tun, es bewegt meine Beschriftungen und die Eingabe von text-Boxen bis knapp unter den Über Mich, Kontakt, etc. Ich will, dass es unter dem Bild -irgendwelche Ideen?
    Es würde gehen, der irgendwo zwischen &lt;head&gt; und &lt;/head&gt; . Auch das hinzufügen der schriftart,-Größe, um den Körper ziemlich viel beeinflusst jedes bit der text auf der Seite. Deine anderen Komponenten sind wahrscheinlich auf der Grundlage der original-Schriftgröße. Man könnte hinzufügen, ein Stil, um die Verknüpfungen, die geschrumpft Kurbel die Größe sichern. Nehmen Sie eine schnelle CSS-tutorial online, vielleicht bei w3schools. Sie lieben es, viel Glück.
    Definition von Schrift-und container-Größen in Bezug auf die Schriftarten ist eine schlechte Praxis. Wir sollten die relative Größe (in der Regel em oder %) für alles, was nicht ein nicht-skalierbare Artefakt wie ein Bild, und für Sie sollten wir eine Strategie haben, die für die Anpassung dieser Artefakte für eine Vielfalt von viewport-Seitenverhältnisse und Auflösungen.

    InformationsquelleAutor Jage

  2. 1

    Diese Schriften sind in verschiedenen Größen zwischen den Browsern, weil jeder verwendet eine andere Basis für die Standard-Größe. Sie können entweder wählen, um live mit es (wie die meisten Nutzer nur einen browser und wird daher nur eine Größe version der Website - nicht gut, aber wenn der größere text vermasselt die layout), oder legen Sie die baseline Schriftgrad, die gleiche in jedem browser.

    Haben Sie einen Blick auf "How to Size Text in CSS". Das ist ein Recht guter Artikel der erklärt, wie man text, der in verschiedenen Browsern, wobei es durch den Benutzer geändert werden.

    InformationsquelleAutor adrianbanks

Schreibe einen Kommentar