CSS寬度兼容問題是每一個網(wǎng)站設(shè)計者都必須面對的問題。盡管CSS在Web設(shè)計中扮演著一個非常重要的角色，但是在移動設(shè)備和舊版瀏覽器兼容性問題上，CSS寬度卻是一大難題。

在一些舊版瀏覽器中，CSS寬度可以被解讀為包括了padding和border。這就意味著，如果你想要得到一個100px寬的盒子，在IE盒子模型下你需要設(shè)置為：寬度60px+padding20px+border10px=100px。而在標(biāo)準(zhǔn)盒子模型下則只需要設(shè)置寬度為100px即可。

.box {
width: 100px;
padding: 20px;
border: 10px solid #333;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; 
}

在這個樣例中，我們通過實現(xiàn)border-box方案解決了這個問題，即如果設(shè)置盒子模型為border-box模式，CSS寬度屬性就會被解讀為包含padding和border。這就消除了舊版瀏覽器和移動設(shè)備不同盒子模型造成的兼容性問題。

還有一點需要注意的是，CSS寬度和百分比也有兼容性問題。在Web設(shè)計中，CSS寬度通常被設(shè)置為百分比，但是在某些瀏覽器中，百分比并不會被正確地解釋。如果你需要實現(xiàn)正確的百分比寬度，建議使用JS編寫代碼來實現(xiàn)。

CSS寬度兼容問題在Web設(shè)計中非常常見，但是只要我們了解了這些問題，就可以在設(shè)計中找到相應(yīng)的解決方案。盡可能考慮到兼容性問題，才能讓我們的設(shè)計在不同平臺和瀏覽器下都能得到良好的展示效果。