IE 和 Firefox 中的嵌套 div 标签答案

【问题标题】：Nested div tags in IE and FirefoxIE 和 Firefox 中的嵌套 div 标签
【发布时间】：2015-04-21 21:46:53
【问题描述】：

我在这里遇到了嵌套 div 标签的问题。如下图所示，它在 IE 中显示一种方式，在 Firefox 中显示另一种方式。我实际上更喜欢 IE 布局。知道如何解决吗？

这是我的代码：

<div style="width:1200; ">
      <p align = "center"><b><font size="4">Joke  Of The Day</font></b><p>
        <div style="width: 80px; float:left; margin:4; "><img src="FredFlipoff.jpg" width="80px" height="80px"></div>
        <div style="width: 280px;>
            <p align="justify"><font size=2">To smooth over her recent negative comments about his  presidency, Hillary Clinton said she and Barack Obama will "Hug-it-Out" next time they meet. Hearing  this, Bill Clinton said he also will  "Hug-it-Out" with political rivals Megan Fox, Angelina Jolie,  Sophia Vergara, Scarlett Johanson, and that Hot waitress who works at The Olive Garden.
            </font><br><hr id='hrdotted' /></div>
</div>

两个输出是这样的：

就像 Firefox 出于某种原因将文本环绕在图像周围，这样做会使 div 的宽度比应有的短。

【问题讨论】：

标签： html internet-explorer firefox

【解决方案1】：

添加第二个div的样式显示：inline-block。

<div style="width:1200; ">
      <p align = "center"><b><font size="4">Joke  Of The Day</font></b><p>
    <div style="width: 80px; float:left; margin:4; "><img src="FredFlipoff.jpg" width="80px" height="80px"></div>
    <div style="display: inline-block; width: 280px;>
        <p align="justify"><font size=2">To smooth over her recent negative comments about his  presidency, Hillary Clinton said she and Barack Obama will "Hug-it-Out" next time they meet. Hearing  this, Bill Clinton said he also will  "Hug-it-Out" with political rivals Megan Fox, Angelina Jolie,  Sophia Vergara, Scarlett Johanson, and that Hot waitress who works at The Olive Garden.
        </font><br><hr id='hrdotted' /></div>
</div>

请看这里： http://jsfiddle.net/cmp3vkwu/

【讨论】：

也有人可能会说将这些样式放在样式表中，因为使用内联样式被认为是一种不好的形式，但我认为您现在正在试验，稍后会这样做。只是一个提示。
完美运行。你是对的，我需要一个单独的样式表。我已经离开 HTML 这么久了，我向一个朋友保证我会迅速把它搞定，而他却在窃听我的鼻涕。 :o)
太棒了！我听到了。在他们给我的匆忙测试中使用内联样式让我失去了工作机会，所以我知道人们对这条规则有多强硬。我提到它可能会阻止其他人对此发表任何评论。我很高兴它成功了！

【解决方案2】：

为了克服浏览器以不同方式呈现 CSS 或元素具有不同默认 CSS 样式的普遍问题，我喜欢在我的项目中包含 Normalize.css。它的目的是减少这些令人沮丧的差异，它在创造一个公平的网络开发竞争环境方面做得很好。

【讨论】：

【解决方案3】：

只需添加以下给定的 css 以防止图像周围的文字环绕。

 img {
     float: left;
 }
 p {
     overflow: hidden;
 }
 div {
     display:block;
 }

检查这个fiddle

【讨论】：