IE中的字体与Firefox和Chrome中的字体不同...为什么？

Question

I am creating a website and the font looks different in IE (it's larger) than it is in Firefox and Chrome. 我正在创建一个网站，并且IE中的字体看起来不同（它比Firefox和Chrome更大）。 Does anyone know why? 有谁知道为什么？ And how do I fix it in IE? 我如何在IE中修复它？

Here's my 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:cookiemaster@cameroncookies.com">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>

Thanks! 谢谢！

Answer 1

Define a font size style: 定义字体大小样式：

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

You could try to define in pixels too for more consistency: 您也可以尝试以像素为单位定义以获得更多一致性：

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

Code would go in your html <head> 代码将放在你的html <head>中

Answer 2

The fonts are different sizes between the browsers because each uses a different baseline for the default size. 浏览器之间的字体大小不同，因为每个字体使用不同的基线作为默认大小。 You can either choose to live with it (as most users will only use one browser and will therefore only see one size version of the site - not good though if the larger text messes up the layout), or set the baseline font size to the same in each browser. 您可以选择使用它（因为大多数用户只使用一个浏览器，因此只会看到网站的一个大小版本 - 如果较大的文本会弄乱布局，则不好），或者将基线字体大小设置为每个浏览器都一样。

Have a look at " How to Size Text in CSS ". 看看“ 如何在CSS中调整文本大小 ”。 This is quite a good article explaining how to get text to appear the same in different browsers, whilst allowing it to be resized by the user. 这是一篇非常好的文章，解释了如何让文本在不同的浏览器中显示相同，同时允许用户调整文本大小。

IE中的字体与Firefox和Chrome中的字体不同...为什么？

问题描述

2 个解决方案

解决方案1
2 已采纳 2010-02-17 23:13:30

解决方案2
1 2010-02-17 23:17:44

IE中的字体与Firefox和Chrome中的字体不同...为什么？

问题描述

2 个解决方案

解决方案1 2 已采纳 2010-02-17 23:13:30

解决方案2 1 2010-02-17 23:17:44

解决方案1
2 已采纳 2010-02-17 23:13:30

解决方案2
1 2010-02-17 23:17:44