在Chrome和Safari中img之后出现了奇怪的突破,但在Firefox中没问题

时间:2012-07-10 19:17:55

标签: css firefox google-chrome browser safari

Live site.

在测试了我正在处理的网站后,我发现了一个仅在Chrome和Safari中出现的奇怪中断。 Firefox中的一切看起来都很好。

Chrome/Safari

             欢迎来到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 -->

我确定这是次要的,我只是无法弄明白。有任何想法吗?谢谢。

2 个答案:

答案 0 :(得分:1)

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

.bio img {
    float: left;
}

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

答案 1 :(得分:1)

文本是否应该在图像的右侧?

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

img {
    float: left;
}