CSS 邊框不占位置是我們在編寫樣式時會遇到的一個問題。由于不同瀏覽器的渲染機制不同，所以在某些瀏覽器中可能會出現邊框占用了元素的寬度和高度的現象。這樣會導致頁面布局混亂，影響用戶體驗。那么如何解決這個問題呢？

.box {
width: 200px;
height: 200px;
border: 10px solid #ccc;
box-sizing: border-box;
}
/* 其他瀏覽器 */
.box {
width: 220px;
height: 220px;
padding: 10px;
border: 10px solid #ccc;
}
/* IE6、IE7 */
* html .box {
/* IE6、IE7 只認識 Border Box 屬性，所以需要將 padding 和 border 寬度合并在一起 */
width: 200px;
height: 200px;
margin: 0 auto;
border: 10px solid #ccc;
border-top-width: 20px;
border-left-width: 20px;
}
/* IE8、IE9 */
.box {
box-sizing: border-box;
}

解決方法是使用 CSS3 中的 box-sizing 屬性。該屬性用于控制元素的盒模型是 content-box（默認值）還是 border-box 。content-box 模型是指將元素的寬度和高度計算為內容區域的寬度和高度，而 border-box 模型是指元素的寬度和高度包括了邊框和內邊距的寬度。
因此，通過設置元素的 box-sizing 屬性為 border-box ，我們就可以讓邊框不占據元素的寬度和高度，從而保證元素布局的準確性和穩定性。同時，我們還需要兼容舊版 IE 瀏覽器。對于 IE6 和 IE7，我們需要使用注釋 hack 和邊框寬度分割的方法來解決兼容性問題。