个人工具
名字空间
变换
操作

WordPress:CSS Troubleshooting

来自站长百科
跳转到: 导航, 搜索

WordPress 1.5版本中新的主题介绍中,令人厌烦而平凡的网站布局已经成为了过去。只要点击几次,你就可以立刻更改你的网站布局。点击并且处理几次,你也能够立马将你的网站布局弄得一团糟。欢迎你来到当前的网页设计世界。

将网站布局弄得一团糟的时候,许多人会来到WordPress 论坛寻求帮助。虽然自愿的志愿者能够尽其所能地帮助你,你自己也可以采取一些步骤,来解决问题,或者至少能够知道问题处在哪里,然后再去访问论坛。

去论坛之前,需要了解:在你带着布局设计问题,去访问论坛之前,你需要了解一些相关内容,以及关于自己解决这个问题的小贴
检查你的HTML和CSS:仔细地比较你的HTML和CSS,并且确保所有的参考都能够相匹配。
隔离你的 CSS Challenges 
下面我们会向你介绍几种方法,帮助确认产生问题的位置,这样来将问题限制到特别的区域和代码上。
常见的CSS 错误 
你并不是第一个碰到这个问题的人。我们有最常见的CSS错误的列表,帮助你解决一些,可能使你的布局混乱的问题。
Pest 控制 – 提防浏览器程序缺陷 
虽然我们会帮助你识别一些CSS challenges,许多challenges是由于程序缺陷以及浏览器之间的冲突,因此我们会向你提供一些小贴士,关于怎样对付不同的浏览器程序缺陷。

这篇文章的目的在于帮助你解决CSS文件内部的布局设计问题,而不是HTML或者PHP文件内部的布局设计问题。关于更改这些的帮助,更多的信息,请查看使用主题

目录

文件备份

在开始用一些小贴士或者方法解决任何问题之前,要确定备份了你的数据库以防万一。同时,在你尝试不同的方法的时候,备份你的文件,这样你可以随时返回。

不编辑WordPress文件,你也可以"在线测试" CSS

如果你有方法,使用(例如)Jesse Ruderman的编辑样式 bookmarklet 或者关于Firefox的编辑CSS扩展,能够更快更加安全地测试并且解决你的CSS问题"on the fly"。当你做好了更改之后,将你的新的(编辑好的)代码复制到适当的WordPress主题文件中(备份后,再复制)。

网络开发员的Firefox扩展名也能够帮上忙。

进入论坛之前,应该了解一些情况

如果你是CSS和网页设计的新手,先访问WordPress的CSS 的小贴士,方法和资源,找到一些关于CSS基本知识的信息,同时上面可能有一些你的问题的答案。至少,你会大致地了解CSS是什么,CSS对HTML或者你的网页结构的影响,同时学习一些行话,帮助你在论坛上问一些更深入的问题。

你也要知道一些基本的方法,帮助你向他人表述你的问题。这并不是一个怎样使用CSS的指南,而是一个" thingamahjig 称作什么的"指南。

CSS (层叠式样式表)是一些代码,会影响你的网页HTML编码的呈现或者外观。在WordPress中,通常能够在你使用的一个特别的主题文件夹的一个称为style.css文件中找到CSS样式。持有你的网页结构的HTML代码和CSS参考,通常可以在你的主题文件夹的index.php文件中找到。

PHP文件可以在你的主题文件夹中找到,包含有编码和参考,这些制作了你的HTML网页。在这里,这个最后一步,你可能更改特别的CSS选择器标签,而不是HTML标签。关于更改这些标签的更多的信息,请看看使用主题

'CSS 选择器 (名称)一般被分为三个特别的references: ID, CLASS,和 HTML标签。

ID

ID是网页上一个特别的独特的区域的references。一般这个ID会出现在HTML网页上,作为一个附加的DIV(分开)区:

<div id="header">网页标题</div>
在样式表中(CSS) the ID 选择器被引用为#标头 而且可能看起来像:
#header { position: relative; margin:0; padding:0;
	height:100px; width: 100%; background: red;
	color: white;}

CLASS

CLASS是网页上任何元素的一个reference,当网页上某个原始需要以一种特别方式显示的时候,就要用到reference。例如,如果你想要频繁地突出文本中的一个或者两个词(在这个例子中,我们将红色作为突出的颜色),你可能在样式表中需要一个像这样的CLASS选择器:

.hilite { 颜色: 红色}

你的HTML 中的reference可能看起来像:
...这个文本是关于我想要的某个东西<span class="hilite">in red</span>. And 
some more rambling here...
如你所见到的那样,样式表中IDCLASS选择器的区别在于ID使用一个井号(#名称),而CLASS使用点号(.名称)。ID references在网页上必须是独特的,而且只能使用一次。CLASS references可以在同一个网页上多次使用。

HTML标签

如果你想要"设计"一个特别的HTML标签reference,例如blockquote,网页内部的编码可能看起来像:

<blockquote>这是一个简练而又价值的引用,我想你会喜欢。</blockquote>
在样式表中,blockquote的reference没有#或者点号,但是会列出HTML和设计元素。这个例子中,引用的两边都缩进了而且引用的左边有一个蓝行,同时引用文本也是斜体的。
blockquote { position: relative; margin: 10px 50px 10px 50px;
	padding:5px;  font-style:italic; 
	border-left:solid blue 4px; }
你可以在任何特别的HTML标签上应用任何设计元素,如body, p, H1, H2, H3, ul, li,以及更多的。

关于更改ID, CLASS, 和HTML的信息,请查看WordPress的CSS 小贴士,方法和资源

重要的注意事项!某些主题在多个地点有css样式表,Kubrick主题就是其中的一个。如果,在一个css文件中更改了css属性之后,你并没有看见你想要的结果,可能你的主题选择在一个php文件(通常是个标题文件)中有些嵌入的css,而且嵌入的css样式表覆盖了链接进的或者导入的css样式表。

检查你的 HTML和 CSS

为了要决定网页设计上哪些元素是合适的,哪些是不合适的,你需要返回到原始资料。这意味着你要深入地观看。

网页的美好外观,你在网络浏览器上看到的漂亮的布局下面,是一连串的编码,编码上有奇怪的听起来怪异的references。窄看一眼,这些编码就如汽车的引擎盖下面的东西。你知道正是引擎盖下面的东西,使得汽车能够开起来,但是那些乱起八糟的编码到底是什么呢?

查看 HTML

深层次地查看网页,确定网页能够被网页浏览器浏览,从你的网页浏览器的顶端菜单上,点击查看 > 原始资料或者网页原始资料。另一个网页会弹出,在你的另一个浏览器窗口的内部或者在称作Notepad的操作系统的程序内部,或者其它操作系统程序内部。这是你的HTML网页,这个网页支持了你的网页的结构。


这个链接会载入到你附加的CSS样式表上。要查看CSS,双击文件名或者在你的网络浏览器文件上输入特别的链接,如:

在WordPress中,PHP是用来真正地产生HTML网页的,通常是复杂的,使人感到疑惑的编码。要查看HTML,请先查看一个网页,例如一篇文章样本。要更改HTML结构和CSS references,你需要更改适当的PHP文件。关于使用主题的Codex 网页有更多的信息,关于怎样查看你的主题模板,找出哪个模板与你的网页上的哪个部分相联系。

这里所列的解决问题的办法,描述了怎样更改CSS来影响网页的布局。要真正地改变主题,请查看主题发展

深入查看 CSS

你一旦深入,查看到了HTML和CSS,就要开始玩侦查的游戏了。开始,你要知道你在查看什么,以及可以在哪儿找到基本的元素,帮助你找到问题所在。

HTML网页拥有所有的结构编码,能够为你的站点所处的"位置"建立网格。将HTML网页看做是一张地图,地图上写满了注释。这些注释事实上是指示器,指向CSS文件中的一些方向。

向下滚动,浏览过许多<link rel='archives'...信息,直到你看到了<body>。这个的下面就是网页布局的"主体"。在这个部分中,每一点信息对于网页的结构和设计,都至关重要。

继续向下滚动,查看识别的ID和 CLASS声明。例如,你可能会看到:

<div id="page">
	<div id="header">
	<h1>My WordPress Site</h1>
		<div id="headerimg">
		</div>
			<div class="description">by Me and Only Me</div>
		</div>
	<div id="content" class="widecolumn">
  		<div class="post">

看起来,这个可能让人感到疑惑,但是这基本上设置了你的内容所在的部分。


它以一个称为"网页",设置了整个网页的外观的模块开始。如果你在CSS文件中查找 #网页选择器,你会看到相关的外观样式。 这个样式在标头部分的后面,标题部分包含有一个标题 (H1) 和你的站点的标题。这个特殊的布局是以默认的 WordPress 1.5称作Kubrick的主题为基础的,这个主题的标头部分包含有一个图像,这个图像由 "headerimg" 部分设置。然后是一个带有 CLASS reference的部分,称为 "description" ,在这个部分中,你拥有一个子标题或者站点的描述。再一次地,查看你的CSS,找到.description 了解这个部分是如何设计的。

接着的两个标签关闭了header (</div>),然后是"content"部分ID,也有一个CLASS,称为"widecolumn",紧跟着另一个CLASS,称为"post""content""widecolumn"布局了特有你的r "post"那个部分。


这是一个母/子关系的例子。同样,就如你在下一个部分中所见到的那样,这是开始产生CSS布局问题的主要部分之一。

CSS 母子关系

设计网页最大的问题之一是要了解问题是在哪里产生的,以及谁能够解决问题。这称为CSS的"母/子关系"。众所周知,父母的内心通常知道孩子们最真实的想法,孩子们通常惧怕父母们的这种想法,也会为此苦恼,因此,了解这样关系,会帮助你解决这个问题。

一个WordPress用户在论坛上发表一个问题,她想要自己的网页上的header在网页上完全地扩展,同时内容要出现在网页的中间,左边和右边都有非常大的空间。她一直尝试处理header周围的空白,但是一直没有效果,因此向我们求助。

<div id="page">
	<div id="header">Header Title</div>
 <div id="content">
  		<div class="post">Post babble here...</div>

这个例子中,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空白控制的。这里正显示了母/子关系。母page告诉子header做什么,但是子header想要做其它的事情。


如果我们更改了page左边和右边的空白,便解决了header的问题,但是我们又由此产生了另一个问题。母page的影响继续存在,现在所有的内容都扩展在整个网页上。要更改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 Challenges

识别母/子关系对于网页的布局的影响,能够帮助解决许多问题,但是有时候,母/子关系非常复杂,很难了解哪个部分是哪个部分,哪个部分影响了哪个部分。

要隔离和确认不同的CSS部分,divisions和classes,下面有几个简单的方法。开始之前,要确定给所有的主要文件包括CSS都做了备份,以确定当处理不当的时候,你还能够返回到原文件。

一旦确定了错误根源并且解决了问题,确定要移除这些测试特色,这样网页又会看起来"正常"。

给每个部分加边框

一旦确认了HTML网页不同的部分或者divisions,进入你的CSS文件,并且给不同的部分,添加以下的属性:

border:solid 1px 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文件,并且网络浏览器上的网页(点击刷新按钮或者F5)。在每个部分的部分上,你会看到一个不同颜色的框。

这是红色的框中突出的另一个部分。

这是返回正常形式的文本的剩余部分。</div>

如果在内容的周围,你没有看见一个带有颜色的框,核查你更改的选择器,有没有正确地拼写了,有没有在HTML中得到了识别。

如果问题源于蓝色的框,那么你知道可以从哪里开始解决问题。完成后,确定移除了测试属性。

如果你使用Firefox作为浏览器,有一个便利的插件能够帮助你解决问题,使得解决css问题变得非常简单。这个插件称为Aardvark,而且可以在http://www.karmatics.com/aardvark/免费得到。测试运行有一个演示程序。

突出某部分

除了在不同部分的周围加上边框,隔离有问题的CSS或者HTML外,你可以快速地更改文章的内容的颜色,使得问题一下子"出现在"你的眼前。通过更改字体的颜色和某个部分的背景色,当你查看网页的时候,你一眼就能发现问题所在。注:确定记录了原始的颜色,这样即使测试时更改了颜色,随后也可以返回原色。同时,要不断地做文件备份!

在CSS文件中,你可以通过向选择器的属性添加color:red,或者任何其它的颜色,来更改一个部分的字体颜色,如:


H1 { font-style:bold; font-size: 125%; color: red; }

H1标题呈现给你的是明亮的red而且看起来像:

要更改某个部分的背景色,你可以添加background:pink,使得整个背景呈现pink

#header { margin:5px; padding: 10px; background:pink; }

结果可能看起来像:

This is some text that goes on babbling here and there.

This is some text with the background color changed so you can see it.

这些文本更改了颜色,这样你能够看到这些文本。

这是返回正常形式的其余的文本

整个标头部分现在拥有一个粉红色背景。当你识别了问题所在,并且解决了问题后,要确定移除了所有的测试属性,以重建网页外观。

确认源代码

有时候,一个极小的错误会使得你的网页变得紊乱。一个拼写错误的标签(rhef 而不是 href),一个忘记关闭的标签,一个丢掉的属性,或者甚至错误的属性,都会使你的网页陷入紊乱。

免费的在线确认器能够帮助你检查HTML,XML和CSS编码,帮助你处理丢掉的内容。当你浏览代码的时候,要跳过一些小错误非常简单。大多数在线确认器向你的站点输入URI(链接),开始确认,或者让你粘贴代码或者上传文件,让它确认。默认情况下,WordPress会确认默认的代码,但是如果你做了更改,一点小小的改动,都会使得网页变得一团糟。

不同的确认器检查不同的问题,因此如果你使用一个确认器不能够找到解决方法,你可以尝试使用另一个。许多validators甚至会推荐做一些其它的更改,但是先找到你的问题所在,再做更改。

要帮助你了解更多的关于确认的信息以及找到在线的确认器,我们在一篇称为确认一个网站的Codex文章上,提供了一系列确认资源。

Slash and Burn - The Last Resort

不适用于胆小的人

注: 有两个Slash and Burn方法。如果你胆子较小,请查看第二个

如果你还没有缩小问题的范围,有一个方法可以使用,有时候称作"Slash 和 Burn",这个方法会帮助你缩小问题的范围。这种方法使用时不能够被干扰,需要你集中精力,需要完整的文件备份,确保你不会破坏,甚至网页设计中已经紊乱的那个部分。 我们同时建议你熟悉HTML和CSS。

1.备份所有的文件。 2.在网络浏览器中打开一篇文章并且浏览>源代码。 3.将这个源文件以一个文本文档保存,称为"junk.html",保存到你的硬盘中的一个空的测试文件夹中。不要关闭这个文件。在这个过程中,这个文件都是打开的。 4.将你的CSS文件复制到同一个测试文件夹中。 5.如果你处理图形的时候,遇到了麻烦,将图形文件夹或者图形复制到测试文件夹中。 6.在junk.html源文件中,将类似: <link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css"> 的样式表reference更改为: <link rel="style sheet" type="text/css" href="style.css">

保存 junk.html 文本文件 (不要将它关闭)。

7.在测试文件夹中,双击junk.html浏览你的浏览器中的文件。如果合适的话,你会看到带有图形的整个页面的布局。如果不行的话,再次检查样式表的链接reference。

8.在你的junk.html文本文件中,转到问题开始发生的位置。进入上述的部分(包括有开始的和结束的标签的部分,例如:

<p>babble...</p>
或者
<div class="post">babble...</div>

:并且从开始标签到结束标签,突出整个部分,并且剪贴这个部分(Cntrl+X)。 9.保存文件。 10.在网页浏览器上刷新网页(F5或者点击刷新-如果出现了问题,你没有看到什么变化,按住SHIFT 键然后安装 F5 或者(在FireFox中)同时按住Cntrl+Shift+R)。 11.你会发现移除的部分,不见了。继续检查看看,问题是不是解决了,或者问题是不是除掉了。如果是的,那个移除部分就是问题所在,如果问题仍然存在,那么继续下面的步骤。 12.如果问题仍然存在,返回到junk.html文件,如果指针已经移动了,将鼠标指针放到你删除某个部分的位置。粘贴返回剪贴的部分(Cntrl+V)。从这里开始向上或者向下移动,并且在第十二步中重复第八步的操作。

在这个过程中的某个步骤中,你可能看到问题既没有解决,也没有消失。从一个大的部分开始,当你找到一个大的问题区域的时候,将这个区域切分为一些小的部分。最终,你会隔离产生问题的区域。注意确认有问题部分的CSS references并且开始更改CSS文件,解决问题。


温和 Slash and Burn

要使用slash和burn的温和版本,而不是如上所述的删除整个部分,将这些部分剪切并且粘贴到记事本或者其它的文本编辑器中,这样你处理剪切和粘贴过程有所失误的时候,这个部分仍然得到了保护。处理这些的时候,要经常地做文件备份,以防万一 (什么你意想不到的情况发生!)。

常见错误

我们都犯错。单词"typo"并不是毫无缘由地得到了发明。下面是CSS的一些最常见的问题。

拼写错误:众所周知,lefttleft不同,而且这可能导致某个内容本应该出现在网页的右边,最后却出现在了左边。在一个页面空白上放上一个30ps可能得不到什么结果,但是30px会起作用。拼写中遗漏字母的错误非常常见而且也很容易遭到忽视。幸运地是,CSS确认器总能够为我们找到这些错误。
遗漏的详细信息:虽然你能够发挥创造力处理CSS,你仍然需要遵循一些基本的规则。每个选择器必须被标示为一个ID或者CLASS,除非这个选择器是一个HTML标签。必须被设置为选择器{ property: value; property: value; }而且必须有括号,冒号和分号。缺少任何一样,什么结果都不会产生或者会出现奇怪的结果。CSS确认器经常会为你找到这些容易遗漏的详细信息。
错误的选择器:如果所有优秀的设计本应该放在#context-text而你却将其放在#content,那么设计就不会对你的布局起作用。幸运地是,浏览网页的时候,你通常能够发现到这一点,因此你只需要将这些设计剪切并且粘贴到合适的标签上,就可以了…然后,要记住,你从#content上删除了什么内容。当然,你可以查阅文件备份,找到丢失的代码。Hint-Hint!
错误的模板模块:虽然WordPress新的模块模板很有用,用户许多时候会更改comments.php 而不是comments-popup.php或者更改了其它名称类似的文件。仔细地检查,你应该一直处理模块部分。如果你偶然地将每个模块搞糟了,可靠的文件备份,能够使得处理重新开始。
多个选择:CSS不能够读懂你的思想。如果同一个选择器有两个references,而且这两个references信息相冲突,CSS需要决定使用哪个reference。如果你将最初的样式表放到了一个新的样式表的上方,这种情况出现很平常。如果你使用一个选择器,来争取,如h1标题,但是什么内容也没有改变,搜索样式表看看,那个选择器是不是有另一个reference。

程序错误控制 –提防浏览器程序缺陷

不管我们怎么努力使我们的网页看起来更加地美观,在不同的浏览器上查看网页,会看到我们美丽的设计已经变得一团糟。

不同的浏览器阅读网页的方式不同。旧的浏览器不会识别新的CSS标准,然而新的浏览器与过去的浏览器"阅读"内容的方式是不同的。结果通常不尽人意,会产生内容的错位,移动,或者会丢失设计元素,更改布局,并且移动了位置。

你怎么知道是浏览器而不是你的设计,产生了问题?通常你不知道。如果你使用CSS有一段时间了,你就会了解一些征兆了。通常,有两个线索:

  • 当你下滚网页的时候,文本开始跳动或者抖动。
  • 当你将鼠标移向一个链接的时候,链接和文本开始跳动。
  • 当你将鼠标移向链接列表的时候,链接列表会跳动。
  • 布局看起来不同。浏览器之间的栏会更宽或者更窄。
  • 图形覆盖了文本或者列表。
  • 特别的效果,例如filters看起来不是一样的或者根本就没有。

要帮助解决你的浏览器缺陷,请查看CSS解决浏览器程序缺陷中的建议和资源。

留言