將額外的邊框添加到浮動在帶容器的固定內部的懸浮元素上？

Question

我有一個瓷磚網格，我想要做的就是將一個瓷磚懸停並添加一個3px邊框，並保持瓷磚正確定位，而不會中斷其周圍的其他瓷磚。目前我還不完全確定如何實現這一目標？這可以通過使用浮動物來實現，還是必須將每個瓷磚完全放置，然後增加擱置瓷磚的z-index，使其突出於其餘部分之上？

此外，瓷磚尺寸必須保持不變並且邊框必須位於瓷磚之外而不是嵌入。

小提琴這裏：http://jsfiddle.net/Z7TwF/

Answer 1

在：您需要刪除邊框的組合寬度懸停選擇：

li:hover{border:3px solid #f00; width: 44px; height: 44px;} 

當您添加邊框的元素，它增加它的尺寸。因此，當您將元素懸停時，移除維度屬性上邊框的組合寬度將解決問題。

http://jsfiddle.net/Z7TwF/2/

---

另一種解決方案是改變箱上漿方法：

li 
{ 
    box-sizing: border-box; 
} 

這實際上告訴瀏覽器與所述元件的寬度來計算所述邊界的寬度，防止您在原始示例中的偏移量。

http://jsfiddle.net/Z7TwF/3/