最近有很多用戶反饋，升級到iOS11之后，瀏覽網頁時發現頁面的各種元素位置都亂了。經過深入的調查和研究，我們發現了這個問題的根本原因。

main {
display: -webkit-flex;   /* 使用老的webkit內核 */
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
div.row {
display: -webkit-box;   /* 使用老的webkit內核 */
display: -webkit-flex;  /* 使用老的webkit內核 */
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}

首先，iOS11中新增了一個叫作main的關鍵字。而許多開發者之前都不知道這個關鍵字的存在，所以在編寫代碼時會出現一些微妙的問題。當main被用于布局時，它的默認flex-direction屬性值是row，而不是column。這樣，我們在頁面布局上使用main標簽時，就可能因為flex-direction的不同而導致元素位置的變化。

其次，iOS11中的webkit內核在flexbox布局中，新增了一些-webkit-前綴的屬性值。這些屬性值在MVC框架中被廣泛使用，并與flex-direction等屬性相互作用。但是，這些屬性在舊的webkit內核中并不存在，導致了一些代碼在iOS11中使用時會出現布局上的變化。

綜上，我們可以采取以下幾種方法來解決iOS11中CSS位置亂的問題：

1. 盡可能不要使用main標簽來布置頁面元素，以避免不必要的錯誤。
2. 在CSS代碼中，盡可能使用經典的flex-direction和相關屬性，避免使用新的-webkit-前綴屬性，以降低代碼出錯的風險。