當使用浮點數對包含跨度的div時沒有右邊框？

我想要在頁面的右側有一些邊框項目。但是邊框只能在頂部，左側和底部顯示，而不能在webkit瀏覽器的右側顯示。我已經在Google Chrome for Windows，iPhone上的Safari和Android上的Chrome上進行了測試。然而，Firefox和IE在我所期望的四面顯示了邊界。當使用浮點數對包含跨度的div時沒有右邊框？

HTML：

<div class="outer"> 
    <span class="wrapper"> 
     <span>no right border</span> 
    </span> 
</div>

CSS：

.outer { 
    float: right 
} 

.wrapper { 
    border: 1px solid black; 
}

在這裏看到活生生的例子： http://jsfiddle.net/3t7zW/2/

這是在WebKit的一個已知的錯誤還是我的東西添加到CSS ？

來源

2013-07-10 Emil

我認爲它與內聯有關。如果將display:block（或display: inline-block）添加到.wrapper，邊框將顯示出來。

來源

2013-07-10 22:19:22 kalley

正確答案在這裏。已知的錯誤：https://bugs.webkit.org/show_bug.cgi?id=58806或https://bugs.webkit.org/show_bug.cgi?id=57441 –

感謝卡爾利的答案，皮特的研究。「內聯塊」按我的意願工作。 – Emil

如果你在'無右邊界'周圍取出額外的span標籤，實際上有一個右邊框。

http://jsfiddle.net/ZWWct/

你也可以簡化你的CSS：

.wrapper { float:right; border: 1px solid black; }

來源

2013-07-10 22:21:06

當使用浮點數對包含跨度的div時沒有右邊框？

回答

相關問題