当前位置： 文江博客话题详情

与 IE9 相比，Firefox 似乎在大多数元素的顶部添加了 3px

发布于 2024-11-26 15:33:00 字数 1209 浏览 2 评论 0原文

还有一个“Firefox 不同意 IE9”以及相反的问题。

我可以解释发生了什么，但一张图片说了一千多个字，所以我拍了一张 FF 和 IE 的屏幕截图：

这是标记：

<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9500; 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>

是什么原因导致的？我用 Firebug 尝试了几种不同的东西，但没有成功。

为什么 Web 开发必须如此烦人？ :)

PS：在评论我对内联样式的使用之前，请注意这是我的项目所需要的。 :)

编辑：按照 Cygal 和 Christophe 的建议，通过使用 CSS 重置，并仅将其应用于我的对象，结果如下：

在此处输入图像描述

真的不能要求更好的东西了，正如 easwee 所指出的那样。 ;)

原文

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:

This sucks

Here is the markup:

<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9500; 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:

enter image description here

Cant really ask for anything better, as easwee so nicely pointed out. ;)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

流殇 2024-12-03 15:33:00

我认为这来自于边框，firefox不计入元素的全局高度，而IE则将边框整合到elem高度中......

所以，它们之间的差异应该是3px，因为最后一个border-bottom不影响其余的部分。

编辑

您是否尝试过使用 CSS 重置，例如：http://meyerweb.com/eric /工具/css/重置/

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/

回复 原文
自我难过 2024-12-03 15:33:00

问题

没有关于默认元素的默认边距、填充、边框和字体大小的规范。在这里，您的标题边距在 Firefox 中似乎比在 IE9 中更大。请注意，仅解决此特定问题的每个解决方案都不会阻止它出现在其他地方。

解决方案

  • 重置 CSS：如果您确实希望获得完全相同的渲染效果，则可以使用一种称为“重置 CSS”的技术，该技术将所有有意义的内容设置为零。然后由您选择您想要的值。您可以尝试 Eric Meyers 的重置 CSS 或 其他。
  • 基本样式表：重置 CSS 可能会对您的样式产生意想不到的影响：效果可能令人惊讶，并且浏览器为元素设置默认值是有原因的。如果您只想纠正“了解不兼容问题”，那么您可以使用简单的基本样式表（此一种存在于紧凑模式和完整模式中）。

但是，请记住，如果每个网站在每个浏览器上的显示效果不同，也没关系，而且由于您无法控制的问题（主要是由于网站的大小），它不会显示相同的内容。用户和旧浏览器选择的字体）。另一个解决方案是放弃并使用 em 中的尺寸等技术。 （而不是像素）在适当的时候。 :)

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. :)

回复 原文
哭泣的笑容 2024-12-03 15:33:00

尝试在 body 标记上指定边距，这应该允许您准确指定所有浏览器在页面主体上想要的边距

<body style="margin: 0px">

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">
回复 原文
此岸叶落 2024-12-03 15:33:00
  • 什么样的系统需要内联样式？它也“需要”font 元素吗？ （顺便说一句，没有“24”这样的大小。有效值为 1 到 6。）。
  • 为什么用户会关心某个浏览器中的渲染是否有几个像素的偏差？他们不会真正进行比较，然后因此而关闭该网站。
  • 您的第一个 span 标记是 XHTML 自闭合标记 ()。 IE 不仅不支持这一点，而且在这种情况下它根本就是错误的。
  • 该文档是否处于标准模式？
  • What kind of system requires inline styles? Does it "require" font elements, 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 span tag 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?
回复 原文
幸福不弃 2024-12-03 15:33:00
-moz-box-sizing:border-box

应该可以解决你的问题，尽管你的 html 很残酷。

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

-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>
回复 原文
~没有更多了~

关于作者

如果没有你

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

爱人如己

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

云雾

文章 0 评论 0

倒带

文章 0 评论 0

浮世清欢

文章 0 评论 0

撩起发的微风

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文