Шрифт выглядит по-разному в IE, чем в Firefox и Chrome ... почему?

Я создаю веб-сайт, и шрифт выглядит по-разному в IE (он больше), чем в Firefox и Chrome. Кто-нибудь знает, почему? И как это исправить в IE?Шрифт выглядит по-разному в IE, чем в Firefox и Chrome ... почему?

Вот мой код:

<?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>

Спасибо!

источник

2010-02-17 Ashley

Определить стиль размер шрифта:

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

Вы могли бы попытаться определить в пикселях также для большей согласованности:

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

код будет идти в вашем HTML < голова >

источник

2010-02-17 23:13:30 Jage

@ Jage- это сработало спасибо. Но у меня есть вопрос: я помещаю его между тегами или я помещаю его непосредственно в тег заголовка? Кроме того, когда я это делаю, он перемещает мои ярлыки и вводит текстовые поля только под «О себе», «Свяжитесь с нами» и т. Д. Я хочу, чтобы это было ниже изображения - какие идеи? – Ashley

Он должен был идти между < головой > и </головой >. Кроме того, добавление размера шрифта в тело в значительной степени влияет на каждый бит текста на странице. Вероятно, ваши другие компоненты основаны на исходном размере шрифта. Вы можете добавить стиль к тем ссылкам, которые сократились, чтобы закрутить размер резервной копии. Возьмите быстрый учебник по CSS онлайн, возможно, в w3schools. Тебе это понравится, удачи. – Jage

Определение шрифтов и размеров контейнеров с точки зрения шрифтов - это плохая практика. Мы должны использовать относительный размер (обычно em или%) для всего, что не является немасштабируемым артефактом, таким как изображение, и для них у нас должна быть стратегия для адаптации этих артефактов для разнообразия пропорций и плотностей видового экрана. – Emyr

шрифты разных размеров между браузерами, потому что каждый использует другую базовую линию для размера по умолчанию. Вы можете либо выбрать для него жить (так как большинство пользователей будут использовать только один браузер и, следовательно, будут видеть только одну версию сайта - не очень хорошо, хотя, если большой текст испортил макет) или установите базовый размер шрифта на то же самое в каждом браузере.

Посмотрите на "How to Size Text in CSS". Это довольно хорошая статья, объясняющая, как заставить текст отображаться одинаково в разных браузерах, позволяя ему изменять размер пользователя.

источник

2010-02-17 23:17:44 adrianbanks

Шрифт выглядит по-разному в IE, чем в Firefox и Chrome ... почему?

ответ

Смежные вопросы