IE 中的字体看起来与 Firefox 和 Chrome 中的不同...为什么？答案

【问题标题】：Font looks different in IE than it does in Firefox and Chrome...why?IE 中的字体看起来与 Firefox 和 Chrome 中的不同...为什么？
【发布时间】：2011-01-18 02:44:12
【问题描述】：

我正在创建一个网站，IE 中的字体看起来与 Firefox 和 Chrome 中的不同（它更大）。有谁知道为什么？以及如何在 IE 中修复它？

这是我的代码：

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

谢谢！

【问题讨论】：

标签： html fonts cross-browser font-size

【解决方案1】：

定义字体大小样式：

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

您也可以尝试以像素为单位进行定义以提高一致性：

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

代码将进入您的 html

【讨论】：

@Jage- 这很有效，谢谢。但我确实有一个问题——我是把它放在标签之间还是直接放在 head 标签中？此外，当我这样做时，它会将我的标签和输入文本框向上移动到“关于我”、“联系我们”等下方。我想要它在图像下方 - 有什么想法吗？
它会在 <head>和 </head> .此外，将字体大小添加到正文几乎会影响页面上的每一位文本。您的其他组件可能基于原始字体大小。您可以为那些缩小的链接添加一种样式以增加尺寸。在线获取快速 CSS 教程，可能在 w3schools。你会喜欢的，祝你好运。
根据字体定义字体和容器大小是不好的做法。我们应该对任何不是不可缩放的人工制品（例如图像）使用相对尺寸（通常是 em 或 %），并且对于它们，我们应该有一个策略来调整这些人工制品以适应视口纵横比和密度的多样性。

【解决方案2】：

浏览器之间的字体大小不同，因为每个浏览器都使用不同的基线作为默认大小。您可以选择使用它（因为大多数用户只会使用一个浏览器，因此只会看到网站的一种大小版本 - 虽然如果较大的文本弄乱了布局，但效果不佳），或者将基线字体大小设置为每个浏览器都一样。

看看“How to Size Text in CSS”。这是一篇很好的文章，解释了如何让文本在不同的浏览器中显示相同，同时允许用户调整其大小。

【讨论】：