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...
- 如你所见到的那样，样式表中ID 和 CLASS选择器的区别在于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 ()，然后是"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）。在每个部分的部分上，你会看到一个不同颜色的框。
这是红色的框中突出的另一个部分。
这是返回正常形式的文本的剩余部分。
如果在内容的周围，你没有看见一个带有颜色的框，核查你更改的选择器，有没有正确地拼写了，有没有在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 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的一些最常见的问题。
- 拼写错误：众所周知，leftt与left不同，而且这可能导致某个内容本应该出现在网页的右边，最后却出现在了左边。在一个页面空白上放上一个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解决浏览器程序缺陷中的建议和资源。