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 :)