It appears Firefox adds 3px to the top of most elements, compared to IE9
Yet another "Firefox does not agree with IE9" and the other way around problem.
I could explain what is going on, but an image says more than a thousand words, so I took a screenie of FF and IE:
Here is the markup:
<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9开发者_Python百科500; border-radius: 4px; width: 400px; height: 161px;">
<span style="color: #2C2C2C; font-family: Arial; font-size: 20px; text-align: center;" />
<font size="24">Look!</font>
<br>
See how different IE renders from FF?
<br>
How can I fix this?
</span>
<br>
<input value="CODE" type="text" size="20" style="font: 20px Arial; color: #000000; background-color: #F3F3F3; border: 1px solid #8D8D8D; width: 300px; border-radius: 2px; text-align: center; margin-top: 0px; padding: 5px 3px 5px 3px; " />
<br>
<input type="button" value="I'm a button!" />
</div>
What can be causing it? I have tried several different stuff with Firebug, but to no avail.
Why does web development have to be this annoying? :)
P.S:Before commenting about my use of Inline Styles, please note that it is how my project requires it. :)
EDIT: By using a CSS Reset, as suggested by Cygal and Christophe, and by applying it only on my objects, here is the result:
Cant really ask for anything better, as easwee so nicely pointed out. ;)
I think it comes from border that firefox doesn't count in the global height of the element in opposition to IE that integrate borders in elem height...
So, the difference should be 3px between them because the last border-bottom does not affect the rest.
Edit
Have you tried to use a CSS reset like : http://meyerweb.com/eric/tools/css/reset/
The issue
There is no specification regarding the default margin, padding, border and font-size of default elements. Here, it appears that the margin of your title is bigger in Firefox than in IE9. Note that every solution that only fixes this specific problem will not prevent it from appearing in other places.
The solution
- Reset CSS: if you do want to have exactly the same rendering, you can use a technique called "reset CSS" which sets everything to zero everywhere it makes sense. It is then up to you to choose the values you want. You could try the Eric Meyers's reset CSS or other ones.
- Base stylesheet: reseting the CSS could and will have unexpected effects on your style: the effects could be surprising and there is a reason why the browser have default values for elements. If you only want to correct "know incompatibility issues", then you can use a simple base stylesheet (this one exists in both compact and full modes).
However, remember that it's OK if every website doesn't appear the same on every browser, and that it won't appear the same anyway due to issues you can't control (mainly due the size of the fonts chosen by users and old browsers). Another solution would then be to let go and use techniques like sizes in em. (and not in piexels) when appropriate. :)
Try specifying the margin on the body tag, that should allow you specify exactly how much of a margin you want on the body of the page for all browsers
<body style="margin: 0px">
- What kind of system requires inline styles? Does it "require"
fontelements, too? (BTW, there is no such size as "24". Valid values are 1 to 6.). - Why would any user care if rendering is off by a few pixels in one browser? It's not like they would actually compare it and then dismiss the site because of it.
- Your first
spantag is XHTML self-closed (<span ... />). Not only doesn't IE support that, it's simply wrong in this case. - Is the document in standards mode?
-moz-box-sizing:border-box
Should solve your problem altough your html is brutal.
<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9500; border-radius: 4px; width: 400px;-moz-box-sizing:border-box;">
<span style="color: #2C2C2C; font-family: Arial; font-size: 20px; text-align: center;">
<font size="24">Look!</font>
<br>
See how different IE renders from FF?
<br>
How can I fix this?
</span>
<br>
<input value="CODE" type="text" size="20" style="font: 20px Arial; color: #000000; background-color: #F3F3F3; border: 1px solid #8D8D8D; width: 300px; border-radius: 2px; text-align: center; margin-top: 0px; padding: 5px 3px 5px 3px; " />
<br>
<input type="button" value="I'm a button!" />
</div>
加载中,请稍侯......
精彩评论