IE和Firefox中嵌套的div标签

Question

我在这里使用嵌套的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宽度变得比它应该的短。

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

Answer 2

只需添加下面给出的css，以防止图像周围的文字结束。

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

检查此fiddle

Answer 3

为了克服浏览器以不同方式呈现CSS或者对元素使用不同的默认CSS样式的一般问题，我喜欢在我的项目中包含Normalize.css。它的目的是减少这种令人沮丧的差异，并且在创建一个水平的网络开发竞争环境方面做得非常好。