Firefox 浮动的行为与 Chrome 和 IE 不同

Question

我正在建立一个网站，并在 div 的右侧浮动了一个图像，左侧有一些文本，我以前做过很多次。但是由于某种原因，图像在 FF 中并没有完全向右浮动，而是在 Chrome 和 IE/Edge 中。这可能很明显，但有什么见解吗？

火狐

Chrome/IE

HTML

<div class="wrapper">
    <img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
    <h1>Hammer Curl</h1>
    <h2>Arms</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
    <div style="clear:both"></div>
</div>

CSS

.wrapper {
   margin: 0px auto;
   width: 1000px;
   padding: 20px 0px;
 }

Answer 1

您应该将文本和标题元素组合在一起，并为它们提供宽度。

根据您提供的 sn-p，看起来两个屏幕截图实际上都遵守您提供的规则 - 两者都将图像浮动到您的文本右侧。

但是，没有规定应该多远——只是离文本多远（40px padding-left）以及整个项目应该有多大（“wrapper”@1000px）；

试试这个：

<div class="wrapper">
    <img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
    <div class="content">
       <h1>Hammer Curl</h1>
       <h2>Arms</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
    </div>
   <div style="clear:both"></div>
</div>

CSS

.content {
    width: 700px // or whatever you want to set it to
}

通过将非图像元素包装在一起，并专门为它们指定宽度，您应该能够在大多数浏览器中保持相同的体验。

编辑：修正了一些格式。