在 Chrome 和 Safari 中 img 后出现奇怪的中断，但在 Firefox 中正常答案

【问题标题】：odd break after img in Chrome and Safari, but ok in Firefox在 Chrome 和 Safari 中 img 后出现奇怪的中断，但在 Firefox 中正常
【发布时间】：2012-07-10 08:16:12
【问题描述】：

Live site.

在测试了我正在开发的网站后，我发现了一个奇怪的中断，它只发生在 Chrome 和 Safari 中。在 Firefox 中一切看起来都很好。

欢迎来到 BodywoRx

    <div class="banner-image">
        <img src="<?php echo get_template_directory_uri(); ?>/img/large.jpg" alt="about-place-holder" id="aph" />
    </div><!-- end banner-image -->
    <p>Body WoRx was founded on the belief that many dysfunctions of the body can be healed through massage therapy.  In a world where prescriptions are written for variety of symptoms, we offer an alternative solution to helping the body heal itself.  We are located in historic downtown Grand Prairie, conveniently centered between Fort Worth and Dallas.</p>
    <div class="bio">
        <img src="<?php echo get_template_directory_uri(); ?>/img/bridgett.jpg" alt="bridgett-freiburger" id="bf" />
        <p>Bridgett suffered from chronic neck, back, and shoulder pain for many years.  She went to many doctors, specialists, had many MRI&apos;s, but no one knew what was causing the pain.  She had been prescribed countless medications to help ease discomfort, but nothing to address the cause.  Bridgett stumbled across massage therapy and has since become a firm believer and advocate in its many benefits and healing properties.  Before getting into massage therapy, Bridgett served in the Marine Corps, and then continued supporting the war fighter while working at Bell Helicopter. Bridgett is a graduate of North Texas School of Swedish Massage.</p>
    </div><!-- end bio -->
</div><!-- end about -->

我敢肯定这是小事，我只是想不通。有任何想法吗？谢谢。

【问题讨论】：

如果我理解您的问题，以下两个答案是正确的。右键单击 Chrome 中的图像，选择“检查元素”。添加浮动：左；规则到右侧的 element.style 框。把它摆正。

标签： css firefox google-chrome browser safari

【解决方案1】：

尝试在第二张图片上使用float。

.bio img {
    float: left;
}

JS 小提琴：http://jsfiddle.net/J4MK4/2/

【讨论】：

【解决方案2】：

文字应该在图片的右边吗？

如果是这样，您需要浮动图像。

img {
    float: left;
}

【讨论】：