在創建GreenGaint主題的過程中，有兩個網頁布局上的問題讓我頭疼了很長時間，一直沒有找出到底是哪裡出了問題，但之後卻在偶然的情況下將這兩個問題解決了。這篇文章裡我就將這兩個破壞網頁布局的隱形殺手總結一下，作為經驗教訓，供大家借鑒。先讓我來說說第一個問題。
發現第一個問題的起因是我在<body>標簽下創建了一個<div id=”wrapper”></div>容器，將頁面中的全部內容都放到了這個容器之內，但是創建完主題之後卻發現wrapper容器的頂部距離<body>標簽，也就是浏覽器頂部有大概25個像素。為了確認這個間隙的存在，我給<body>標簽和wrapper容器添加上了1個像素的border屬性，發現確實存在這個問題。然後我又仔細檢查了CSS代碼，看看是不是手誤給wrapper容器添加了margin-top屬性，發現代碼一切正常，這就讓人納悶了，到底是哪裡出了問題呢？
前一段時間准備更新GreenGaint主題，在整理完head.php文件頁首的<meta>和<Link>等標簽後，查看頁面源代碼時，突然發現在<head>標簽內出現了幾行多余出來的代碼，仔細一看，其中還有<style>標簽，並且還有各種內邊距外邊距屬性，這我就明白了，為什麼wrapper的頂部會無緣無故空出幾十個像素來了。原來是這裡的<style>標簽在作怪。但是這些代碼並非我寫上去的，怎麼會出現在<head>標簽內呢？經過認真一行一行和head.php文件中代碼的比對，發現有這麼一句<?php wp_head() ?>很可疑，不知道是干嘛用的。搜索查完資料後才知道wp_head()是wordpress的一個非常重要的函數，基本上所有的主題在header.php這個文件裡都會使用到這個函數，而且很多插件為了在header上加點東西也會用到wp_head()，比如SEO的相關插件。但是，在wp_head()出現的這個位置，會增加很多並不常用的代碼。這就解釋了為什麼在<head>標簽內會出現<style>標簽和wrapper容器的頂部會出現間隙的原因，果然刪除了這句代碼後，頁面顯示正常了。這裡需要說明的是，直接將wp_head()函數刪除可能會影響到某些插件的正常使用，所以如果你既不想讓這句代碼影響頁面布局，又不想影響插件的使用，可以搜索查詢一下如何安全的刪除wp_head()代碼的方法。
另外一個奇怪的問題就是側邊欄下沉的問題，創建好GreenGaint主題之後，在測試主題在浏覽器的兼容性上，我發現側邊欄在IE和Firefox中都很正常，唯獨在Safari浏覽器中，側邊欄向下下沉了幾十個像素，頂部和內容區部分無法保持在同一水平線上。檢查了代碼後沒有發現任何問題，這讓我百思不其解。很長一段時間這個問題就被擱置了，還是在最近更新GreenGaint主題的時候，我突然想到會不會是文件編碼導致了這個問題呢？用EditPlus打開sidebar.php文件後，發現編碼為UTF-8+BOM，而其它文件也是這個編碼。雖然我並不清楚這個編碼是什麼意思，我還是把sidebar.php和其它主題文件另存為了UTF-8格式，這之後再用Safari測試後發現一切正常，又一個詭異而讓人頭疼的問題解決了。