Css：元素漂浮在firefox上的Image上，但不在其他浏览器中。 firefox是否遵循CSS标准或其他浏览器？

Question

Like in the title, I have this:

http://jsfiddle.net/Eddie84/vh6n4/

Is firefox respecting css standards or are the other browsers? And, how can I have the same result on other browsers without changing the DOM and not twisting the css?!

HTML:

<div>
    <h2>
        <a href="#">Lorem Ipsum</a>
    </h2>
    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>

<h4>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit.</h4>
    <a class="circle" href="#">
        <span>Lorem</span> <br />
        <span>
            <img alt="" src="http://lorempixel.com/50/50" />
        </span>
    </a>

    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis</p>
    <p>
        <img style="display:block; width:100%" alt="" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" />
    </p>
    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis</p>
</div>

CSS:

.circle {
    float:right;
    border-radius: 50%;
    box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    height: 110px;
    line-height: 1.4;
    padding: 10px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 110px;
    background:red;
}

Thank you very much

Serafino

Answer 1

its not firefox bug..you just din use clear as you use float so you must use clear:both then you can see that your code is working..check my code..

<p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>

<h4>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit.</h4>

    <a class="circle" href="#">
        <span>Lorem</span> <br />
        <span>
            <img alt="" src="http://lorempixel.com/50/50" />
        </span>
    </a>

    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis</p>
    <div style="clear:both;"></div>

    <p>
        <img style="display:block; width:100%" alt="" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" />
    </p><div style="clear:both;"></div>
    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis</p>

evn if i will use display:block or not but circle image wont overflow on another..i hope you will like my ans..thanx :)