武林網(www.49028c.com)文章簡介：破壞網頁布局的兩個隱形殺手.
在創建GreenGaint主題的過程中，有兩個網頁布局上的問題讓我頭疼了很長時間，一直沒有找出到底是哪里出了問題，但之后卻在偶然的情況下將這兩個問題解決了。這篇文章里我就將這兩個破壞網頁布局的隱形殺手總結一下，作為經驗教訓，供大家借鑒。先讓我來說說第一個問題。
一、謹慎使用wp_head()語句發現第一個問題的起因是我在<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()代碼的方法。
二、確保wordpress主題各文件的編碼一致另外一個奇怪的問題就是側邊欄下沉的問題，創建好GreenGaint主題之后，在測試主題在瀏覽器的兼容性上，我發現側邊欄在IE和Firefox中都很正常，唯獨在Safari瀏覽器中，側邊欄向下下沉了幾十個像素，頂部和內容區部分無法保持在同一水平線上。檢查了代碼后沒有發現任何問題，這讓我百思不其解。很長一段時間這個問題就被擱置了，還是在最近更新GreenGaint主題的時候，我突然想到會不會是文件編碼導致了這個問題呢？用EditPlus打開sidebar.php文件后，發現編碼為UTF-8+BOM，而其它文件也是這個編碼。雖然我并不清楚這個編碼是什么意思，我還是把sidebar.php和其它主題文件另存為了UTF-8格式，這之后再用Safari測試后發現一切正常，又一個詭異而讓人頭疼的問題解決了。
新聞熱點
疑難解答
