CSS IE 与 Firefox 中的边距问题答案

【问题标题】：Margin problems in CSS IE vs FirefoxCSS IE 与 Firefox 中的边距问题
【发布时间】：2011-11-29 11:28:47
【问题描述】：

我正在尝试用 HTML/CSS 制作横幅。但是，我的一个 div 的边距有问题。它在 Firefox 中完美运行，但在 IE 中无法运行。

#lowerText{
       float: left;
       margin-top: 50px; 
       margin-left: -185px;
       color: rgb(255, 199, 142); 
       font-family: 'Special Elite', cursive; 
       font-size: 15px; 
       text-transform: uppercase;
       display:inline;
}

#upperText{
      float: left;
      margin-left: 20px; 
      margin-top: -10px; 
      color: rgb(255, 199, 142); 
      font-family: 'Special Elite', cursive; 
      font-size: 30px; 
      text-transform: uppercase;
      display:inline;
}

这是#lowerText 中的h3 标签，上面写着“-Foo foo foo bar”。在 IE 中它只显示：“oo bar”。此 div 中的文本必须位于 #upperText 下方的特定位置。但是#lowerText 中的margin-left: 185px 在IE 中不显示，但在Firefox 中显示。

我需要做什么来解决这个问题？

【问题讨论】：

你能展示你目前拥有的东西吗？ jsbin.com
你是什么意思，我到目前为止有什么？
我的意思是，您能否制作一个包含您的 HTML/CSS 的 JS Bin 演示来重现您的问题。制作演示使我们能够更轻松地回答您的问题。
我认为这应该可行：jsbin.com/ubolog/edit#javascript,html 如果你在 Firefox 中打开它，它应该是这样的。但是如果你尝试 IE9，你会发现文本不正确。
这很奇怪。我在 IE 中打开了我在之前评论中发布的链接，单击了“渲染”按钮。横幅很好，wth。

标签： html css internet-explorer firefox xhtml

【解决方案1】：

在您的评论中，您声明您的 jsfiddle 在 IE 中工作。 jsfiddle 自动插入一个文档类型，我现在假设您在原始页面中没有该文档类型。如果是这样，IE 处于怪癖模式，没有文档类型和问题的原因（除了 IE 是地球上最糟糕的浏览器）。

编辑：没有先看。 jsfiddle 显示了一个文档类型。你把那个放在那里了吗？

【讨论】：