CSS Font variation problem in IE and FireFox_问答_开发者

CSS Font variation problem in IE and FireFox

开发者 https://www.devze.com 2023-03-24 22:47 出处：网络

I\'m using this body style body { font-fa开发者_如何学Cmily: Verdana, Arial, Helvetica, sans-serif;

相关专题：css

I'm using this body style

body {
    font-fa开发者_如何学Cmily: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    margin: 0;
}

However, in IE7 and IE8, the font is smaller than in Firefox. What could be the problem?

Nope - nothing wrong. Browsers just render differently.

If you need to, try searching for "internet explorer specific css" and you should find MANY examples of how you can tweak certain chunks of your CSS to be specific to internet explorer - for example you can specify the font be a bit larger if in IEx.

What you need is a CSS Reset stylesheet, like YUI CSS Reset and CSS Fonts.

Basically, those CSS styles are meant to be the first styles appearing in your page, and they aim to display the same elements in the same way across all browsers.

It's really a good practice to use them, they save a lot of time trying to adjust things by yourself for each browser.

To clarify, what YUI Fonts do is assigning percentage value for fonts. As you can see reading this article, using px values for fonts may cause them to be rendered inconsistently among different browsers (even on the same OS). This is because every browsers simply has a different way of dealing with fonts.

Using percentage values is a much better way of size fonts, and maintain browser zoom support.

After including YUI Fonts reset, to correctly size fonts from there on you can refer to the following table for using the right percentage values.

You may also want to take a look at this question.

I set up a test page using your style sheet sample, but I don't see any difference in size between Firefox and IE8 whatsoever. Perhaps there are other CSS rules causing your particular problem?

I generally use ems to normalize font sizes and haven't had any issues. IE6 didn't allow users to re-size text that had been sized in pixels, so we abandoned the use of px.

The default size for 'medium' text in all browsers is 16px. Adjusting this size by 62.5% brings the size down to 10px. (16 * 0.625 = 10) This reduces the mathematical complexity of computing font size. Now you can think in pixels but set sizes in ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. See http://clagnut.com/blog/348/.

<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
    font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0;
}

#content {
    font-size: 1.2em;
}
</style>
</head>

<body>
    <div id="content">
        <h1>Test Page</h1>

        <p>Duis commodo hendrerit arcu, nec tincidunt est malesuada vel. Nunc
        sodales nisl vel dui mattis pulvinar. Vestibulum vel malesuada augue.
        Aliquam vel tristique sem. Sed at leo et felis ultrices facilisis. In
        hac habitasse platea dictumst. Fusce id sapien eros. Nulla facilisi.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus.</p>
    </div>
</body>
</html>

As an aside: you might also consider using the line-height property to adjust the spacing between lines in a paragraph. Wider spacing between lines makes the text much easier to read.