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

Question

就像标题一样，我有这个：

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

firefox是否遵循CSS标准或其他浏览器？ 而且，如何在不更改DOM且不扭曲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;
}

非常感谢你

塞拉菲诺

Answer 1

它不是firefox的错误..您只是在使用float时使用了clear，所以必须使用clear：两者都可以看到您的代码正在工作..检查我的代码..

<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，如果我将使用display：block或不，但圆形图像不会在另一个..我希望你会喜欢我的ans..thanx :)