2010-02-17 3 views
3

웹 사이트를 만들고 있는데 Firefox와 Chrome에서보다 Internet Explorer에서 폰트가 다르게 보입니다 (크기는 큼). 아무도 이유를 아나요? 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> 

감사 :

여기 내 코드입니다!

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

코드 < 머리를 HTML에 갈 것 >

답변

2

은 글꼴 크기 스타일을 정의 브라우저는 기본 크기에 대해 다른 기준선을 사용하기 때문에 글꼴은 글꼴 크기가 다릅니다. 함께 살기로 선택할 수도 있습니다 (대부분의 사용자는 하나의 브라우저 만 사용하므로 하나의 크기 버전의 사이트 만 볼 수 있습니다. 큰 텍스트가 레이아웃을 망칠 경우 좋지 않습니다). 기준선 글꼴 크기를 각 브라우저에서 동일합니다.

"How to Size Text in CSS"을보십시오. 이것은 다른 브라우저에서 텍스트를 똑같이 보이게하는 방법을 설명하는 좋은 기사이며 사용자가 크기를 조절할 수있게 해줍니다.

+0

@ Jage-이 감사드립니다. 하지만 질문이 있습니다 - 태그 사이에 넣을 수 있습니까? 아니면 직접 head 태그에 넣을까요? 또한이 작업을 수행하면 내 레이블, 입력 텍스트 상자가 About Me, Contact Us 등의 바로 아래까지 이동합니다. 이미지 아래에서 원하는 것은 무엇입니까? – Ashley

+0

< 머리 >과 </머리 > 사이에 어디든 갈 것입니다. 또한 본문에 font-size를 추가하면 페이지의 모든 텍스트 비트에 거의 영향을 미칩니다. 다른 구성 요소는 원래 글꼴 크기를 기반으로합니다. 크기를 다시 크랭크 링하는 스타일에 링크를 추가 할 수 있습니다. w3schools에서 온라인으로 간단한 CSS 튜토리얼을 볼 수 있습니다. 당신은 그것을 좋아할 것입니다. 행운을 빈다. – Jage

+0

글꼴 측면에서 글꼴 및 컨테이너 크기를 정의하는 것은 바람직하지 않습니다. 우리는 상대적인 크기 조정 (일반적으로 em 또는 %)을 이미지와 같이 스케일링 할 수없는 인공물이 아니어야하며, 뷰포트의 종횡비와 밀도의 다양성을 위해 이러한 인공물을 적용하는 전략이 있어야합니다. – Emyr

1

:

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

당신은 너무 많은 일관성을 픽셀 단위로 정의하기 위해 시도 할 수 :

관련 문제