CSS的邊框屬性在網頁設計中十分重要，可以為頁面增加美觀和清晰度。然而，有時候利用CSS添加邊框會導致元素錯位。

造成這個問題的原因是，CSS的邊框屬性會改變元素的寬度和高度，從而影響元素的大小和位置。特別是在使用百分比或者em作為單位時，這種錯位尤為明顯。

.example {
width: 50%;
border: 2px solid black;
}

在這個例子中，給寬度為50%的元素添加了2像素的黑色實線邊框。這會讓元素總寬度變成52像素，從而引起錯位。

解決這個問題的方法有很多，其中一種是使用CSS的box-sizing屬性。box-sizing有兩個取值：content-box和border-box。默認值是content-box，意味著寬度和高度只包括內容的大小，而不包括邊框和內邊距的大小。而border-box則表示寬度和高度包括了內容、邊框和內邊距的大小。

.example {
width: 50%;
border: 2px solid black;
box-sizing: border-box;
}

在這個例子中，添加了box-sizing屬性，并將其值設置為border-box。這會讓元素的寬度和高度包含邊框的大小，從而避免了錯位問題。

除了使用box-sizing屬性，還可以使用fixed或者absolute定位、flexbox布局和calc()函數等方法來解決這個問題。因為網頁設計涉及到很多因素，解決問題的方法因情況而異。因此，程序員需要根據具體情況選擇最合適的解決方案。