Post babble here...
这里空白部分的CSS属性是:
#page { margin-top:5px; margin-right: 100px; margin-bottom: 5px; margin-left:100px; } #header { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px;} #content { margin-top:5px; margin-right: 20px; margin-bottom: 5px; margin-left:20px; } .post { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; }
从这位用户的代码中可以判断出,更改header的空白部分不起作用的原因在于,空白部分首先受到了page空白部分的影响。这就是CSS父子关系造成的影响。引发问题的“父亲”page指示“孩子”header进行某个操作,而header希望达到的却是另一种效果。
如果更改page左右两侧空白,header的空白问题也就解决了。但新的问题又出现了。page继续发挥自己的影响,content部分的宽度也达到了页面宽度。这时又需要更改content左右两侧的空白,恢复原有宽度。要是页面上所有元素都和谐共处,新的空白部分可以是:
#page { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; } #header { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px;} #content { margin-top:5px; margin-right: 100px; margin-bottom: 5px; margin-left:100px; } .post { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; }
缩小问题代码范围
意识到父子关系对网页的影响之后,很多问题就可以解决了。但有时这些关系是那么地复杂,很难断定究竟是哪个部分出了问题,又是哪一部分影响到了哪一部分。
下面有些招数可以更快地逐步缩小并最终确定出问题的CSS版块、区块以及class类。首先要备份CSS文件在内的所有主要文件,确保出错后可以用备份恢复原状。
确定问题根源并纠正后,删除中途用以测试的内容,使网页恢复“正常”状态。
圈出各个版块
认识HTML页面的各个区域或块后,打开CSS文件,为所有的DIV块加入以下属性:
border:solid 1px color
在每个区块中单词color的后面加上另一种颜色的名称。
例如:
#page { margin:5px; padding:0; border: solid 1px red; } #header { margin: 10px; padding: 5px; border: solid 1px blue; } #content { margin:5px 100px 5px100px; padding:10px; border: solid 1px green; } .post { margin:5px; padding:10px; border: solid 1px yellow; }
保存CSS文件,在web浏览器中查看页面(点击刷新或F5)。现在可以看到不同区块外会有不同颜色的方框围绕。
如果文本没有被有色方框围绕,检查之前所更改的选择符是否拼写正确,是否能被HTML识别。
如果问题出现在蓝色方框中,就可以从蓝色方框中着手解决问题。记住在问题解决后删除测试属性。
在火狐浏览器中有一个插件可以按照以上方法圈出各个版块,极大地简化了解决问题的过程。这个插件叫做 Aardvark,可以在http://www.karmatics.com/aardvark/上免费下载,网站上还有一个试验演示。
高亮显示各版块
除了用文本框框出不同版块以分辨CSS/HTML问题源头外,还可以通过改变文本颜色来突出显示问题所在区域。注意:在测试过程中记住原有颜色,以便完成测试后恢复原状。记住备份!
可以在CSS文件中某个选择符的属性中加入color:red(也可以是其它颜色)字样,更改该版块的字体颜色:
H1 { font-style:bold; font-size: 125%; color: red; }
鲜艳的红色H1标题会立刻吸引住我们。
要更改某个版块的背景色,可以加入background:pink,使整个背景颜色都变成粉色。
#header { margin:5px; padding: 10px; background:pink; }
效果图:
现在整个header区块的背景色都是粉色的了。查找到错误并修正后,删除对背景色的设置,让网页恢复原状。
验证代码
即使非常小的细节性错误都有可能摧毁页面布局。一个拼写错误的标签(将href拼写成rhef),一个忘记闭合的标签,一个被忽略的属性,甚至只是个错误的属性都可能使页面瘫痪。
我们浏览代码时,很容易忽略代码中的小问题,而免费的在线验证程序可以帮我们检查出HTML、XML以及CSS代码中的细微错误。大多数在线验证程序都需要我们输入网站的URI(链接)以初始化验证过程,有的甚至需要我们复制代码或上传文件才能开始验证。默认情况下,WordPress会验证自己的代码,而一旦用户更改了代码,WordPress就不再验证,因此即使最小的代码错误也可能引发混乱局面。
不同的验证程序检查不同问题,如果不能在某个验证程序中找出解决方法,可以尝试另一种验证程序。很多验证程序建议用户进行这样或那样的修改,但修改前请找出问题所在。
WordPress手册文档中的验证网站提供了很多验证网站和在线验证程序的资料,帮助大家了解更多网站验证方面的信息。
火耕法——最后的方法
胆小勿入
注意:火耕法有两种形式,如果觉得第一种过于冒险,可以选择第二种。
进行以上操作后如果仍然不能确定问题范围,这里还有一种方法,这种方法有时会被叫做“火耕法”,可以帮助缩小问题范围。火耕法需要不被打扰的环境、完全的注意力以及方便出错后还原页面布局的完整备份。最好熟悉HTML和CSS。
1. 备份所有文件
2. 在浏览器中打开某篇日志,点击“查看”——“页面源代码”
3. 将源代码文件命名为junk.html,以文本文档形式保存在硬盘中的空白测试文件夹中。不要关闭文件,在整个测试过程中保持文件的打开状态。
4. 将CSS文件复制到同一测试文件夹下
5. 如果图片出错,将图片文件夹或图片复制到测试文件夹中
6. 将junk.html源文件中的样式表引用:
改为:
保存junk.html文本文件(但不要关闭文件)。
7. 在测试文件夹中双击junk.html,在浏览器中检查文件内容。这时可以看到带有相应图片的正常页面样式。如果图片仍然不合适,双击链接引用进入样式表。
8. 在junk.html文本文件中找到问题开始的地方,转移到该版块的上一部分(一个包括开始标签和结束标签的版块),如:
babble...
或
babble...
高亮显示从开始标签到结束标签的整个版块内容,剪切这部分内容(Ctrl+X).
9. 保存文件
10. 在浏览器中刷新网页(F5或点击刷新——如果没有发现什么变化,按住SHIFT键,然后再按下F5键,如果在火狐浏览器中则可以同时按下Ctrl+Shift+R).
11. 这时应该看到页面上被剪切的内容已经不见了。继续检查页面,看问题是否已经被修正,如果是,那么被剪切的这部分内容就是问题所在了。如果问题仍然存在,前往下一步。
12. 如果问题仍然存在,返回junk.html文件,将光标放回被剪切内容的位置上。将被剪切内容复制回文件中(ctrl+V)。之后将光标移到附近位置,重复第8至第12步。
问题可能会在整个过程中的某一步骤得到纠正或自动消失。查找问题时先从较大的区域开始,确定问题出现在某个区域后,再将该区域划分为小块,最终找出问题所在。标注CSS引用以识别问题所在位置,以便于在CSS文件中修正错误。
相对温和的方法
火耕法有个相对温和的版本——相较于之前介绍的“剪切”代码的问题部分,这里可以将问题部分剪切并复制到记事本或其它文本编辑器中,确保不会因为用户中途分神而丢失所剪切的内容。随时记住备份,避免意外情况发生(意外情况发生的频率远高于你的想象!)。
常见CSS错误
人总是会犯错误的。"typo"(打字错误)这个词的出现也是事出有因。下面是一些最常见的CSS错误。
代码拼写错误
众所周知,leftt与left自然是不同的,这可能就是原来应该出现在页面左侧的元素出现在页面右侧的原因。将页面的页边距设为30ps并不影响页面实际效果,但30px却会对页面效果造成很大影响。拼写错误相当常见,也很容易被忽略。幸好CSS验证程序能帮我们找出这些细微的错误。
被忽略的细节
CSS具有极强的创造性,但也有些必须遵守的基本规定。除了HTML标签,每个选择符(selector)都需要被标注为ID或CLASS,并以selector形式展开(property: value; property: value;),括号、冒号、分号一个都不能少。忽略任何一个细节页面布局都不会发生变化,或者会发生不良变化。CSS验证程序也能帮我们找出这些细微的错误。
错误的选择符
将本应放在#content-text中的设计创意放在了#content中,这对页面布局不会有任何帮助。幸好查看页面时会立即发现这类错误,只要将内容剪切并复制到正确的位置就可以解决问题....记住自己在#content中删除的内容。当然,可以在备份文件中找回丢失的代码。切记!
不恰当的模板模块
WordPress的模块化模板非常实用,但很多时候用户应该在comments-popup.php或类似名称的文件中做改动时,会误在comments.php中做了修改。每次需要修改文件内容时,请双击相应的模块版块。如果无意间出错,可以用备份资料还原。
多项选择
CSS不可能看到我们在想什么,如果同一个选择符有两个相互矛盾的引用,选择符需要在其中进行选择。在新样式表后引入自己原创的样式表,上述问题就会经常出现。假设你在查找h1标题选择符的错误,但没有成果,可以在样式表中搜索该选择符是否有另一个引用。
除害——注意浏览器BUG
无论我们怎样绞尽脑汁地美化网页,在另一个浏览器中查看我们的页面时,都有可能看到被扭曲的页面版式。
不同浏览器有不同的页面解析方式。旧式浏览器无法识别新的CSS标准,而新式浏览器之间也没有达成统一的“查看”页面方式。于是浏览器的网页显示效果总是不尽如人意,设计元素或过度闪烁,或不断跳动,或丢失,页面版块被移动,布局扭曲。
那么要怎样才能判断出是浏览器而不是设计导致的原因呢?很多人可能根本无从分辨,但如果精通CSS,就能辨别浏览器出错的各种症状。下面是一些简单的提示:
- 鼠标在页面上滚动时,文字跳动或闪烁
- 将鼠标移到某个链接上时,链接和文字都会跳动
- 将鼠标移到链接列表上时,整个列表都会跳动
- 页面样式异常。文本框或变宽,或变窄
- 图片覆盖文字或列表
- 过滤器等特殊效果异常或无法显示
想了解浏览器BUG的更多信息,请参阅CSS之修复浏览器漏洞。
‹ CSS之修复浏览器漏洞 向上 WordPress FAQ ›