Font semble différent dans IE que dans Firefox et Chrome ... pourquoi?

Je crée un site web et la police est différente dans IE (c'est plus grand) que dans Firefox et Chrome. Quelqu'un sait-il pourquoi? Et comment puis-je le réparer dans IE?Font semble différent dans IE que dans Firefox et Chrome ... pourquoi?

Voici mon 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>

Merci!

Source

2010-02-17 Ashley

Définir un style de taille de la police:

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

Vous pouvez essayer de définir en pixels trop pour une plus grande cohérence:

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

code irait dans votre html < tête >

Source

2010-02-17 23:13:30 Jage

@ Jage- cela a fonctionné grâce. Mais j'ai une question - est-ce que je le mets entre les étiquettes ou est-ce que je le mets directement dans l'étiquette de tête? Aussi, quand je fais cela, il déplace mes étiquettes et les zones de texte de saisie juste en dessous de la rubrique À propos de moi, Contactez-nous, etc. Je le veux en dessous de l'image -un peu d'idées? – Ashley

Il irait n'importe où entre < tête > et </tête >. En outre, l'ajout de la taille de police au corps affecte à peu près tous les bits du texte sur la page. Vos autres composants sont probablement basés sur la taille de la police d'origine. Vous pouvez ajouter un style à ces liens qui rétrécissent pour revenir en arrière. Prenez un rapide tutoriel CSS en ligne, peut-être à w3schools. Vous allez adorer, bonne chance. – Jage

La définition de la taille des polices et des conteneurs en termes de polices est une mauvaise pratique. Nous devrions utiliser un dimensionnement relatif (généralement em ou%) pour tout ce qui n'est pas un objet non-scalable tel qu'une image, et pour eux nous devrions avoir une stratégie pour adapter ces artefacts à une diversité de formats et de densités d'affichage. – Emyr

Le Les polices sont de tailles différentes entre les navigateurs car chacune utilise une ligne de base différente pour la taille par défaut. Vous pouvez choisir de vivre avec (puisque la plupart des utilisateurs n'utiliseront qu'un seul navigateur et ne verront donc qu'une seule version du site - ce qui n'est pas bon si le texte plus grand chamboule la mise en page), ou fixent la taille de la police de base au même dans chaque navigateur.

Regardez "How to Size Text in CSS". C'est un bon article expliquant comment faire en sorte que le texte apparaisse de la même manière dans différents navigateurs, tout en permettant à l'utilisateur de le redimensionner.

Source

2010-02-17 23:17:44 adrianbanks

Font semble différent dans IE que dans Firefox et Chrome ... pourquoi?

Répondre

Questions connexes