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