编辑“WordPress:CSS Troubleshooting”

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

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

; [[#WordPress:Know Before You Go|去论坛之前，需要了解]]：在你带着布局设计问题，去访问论坛之前，你需要了解一些相关内容，以及关于自己解决这个问题的小贴
; [[#WordPress:Examine Your HTML and CSS|检查你的HTML和CSS]]：仔细地比较你的HTML和CSS，并且确保所有的参考都能够相匹配。

; [[#WordPress:Isolate Your CSS Challenges|隔离你的 CSS Challenges]] :下面我们会向你介绍几种方法，帮助确认产生问题的位置，这样来将问题限制到特别的区域和代码上。

; [[#WordPress:Common_Errors|常见的CSS 错误]] :你并不是第一个碰到这个问题的人。我们有最常见的CSS错误的列表，帮助你解决一些，可能使你的布局混乱的问题。

; [[#WordPress:Pest Control - Watching Out For Browser Bugs|Pest 控制 – 提防浏览器程序缺陷]] :虽然我们会帮助你识别一些CSS challenges，许多challenges是由于程序缺陷以及浏览器之间的冲突，因此我们会向你提供一些小贴士，关于怎样对付不同的浏览器程序缺陷。

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

==文件备份==

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

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

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

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

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

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

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

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

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

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

=== '''ID'''===

'''ID'''是网页上一个特别的独特的区域的references。一般这个ID会出现在HTML网页上，作为一个附加的DIV（分开）区：

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

=== '''CLASS'''===

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

.hilite { 颜色: 红色}
: 你的HTML 中的reference可能看起来像:
<pre>...这个文本是关于我想要的某个东西&lt;span class="hilite"&gt;in red&lt;/span&gt;. And 
some more rambling here...</pre>

;如你所见到的那样，样式表中'''ID''' 和 '''CLASS'''选择器的区别在于'''ID'''使用一个井号（#名称），而'''CLASS'''使用点号（.名称）。'''ID''' references在网页上必须是独特的，而且只能使用一次。'''CLASS''' references可以在同一个网页上多次使用。

===HTML标签===

如果你想要"设计"一个特别的HTML标签reference，例如<tt>blockquote</tt>，网页内部的编码可能看起来像：

<pre><blockquote>这是一个简练而又价值的引用，我想你会喜欢。</blockquote></pre>

:在样式表中，<tt>blockquote</tt>的reference没有#或者点号，但是会列出HTML和设计元素。这个例子中，引用的两边都缩进了而且引用的左边有一个蓝行，同时引用文本也是斜体的。
<pre>blockquote { position: relative; margin: 10px 50px 10px 50px;
	padding:5px;  font-style:italic; 
	border-left:solid blue 4px; }</pre>

:你可以在任何特别的HTML标签上应用任何设计元素，如<tt>body, p, H1, H2, H3, ul, li,</tt>以及更多的。

关于更改'''ID''', '''CLASS''', 和HTML的信息，请查看[[WordPress:CSS|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文件。[[WordPress:Using Themes|关于使用主题的Codex 网页]]有更多的信息，关于怎样查看你的主题模板，找出哪个模板与你的网页上的哪个部分相联系。

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

===深入查看 CSS===

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

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

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

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

<pre><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"></pre>

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


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

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


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

=== CSS 母子关系===

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

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

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

这个例子中，CSS页面空白的属性是：

<pre>#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; }</pre>

仔细观察这个编码，会发现更改<tt>header</tt>上的页面空白，不起作用，因为标头页面空白本来是由<tt>page</tt>空白控制的。这里正显示了母/子关系。母<tt>page</tt>告诉子<tt>header</tt>做什么，但是子header想要做其它的事情。


如果我们更改了<tt>page</tt>左边和右边的空白，便解决了<tt>header</tt>的问题，但是我们又由此产生了另一个问题。母<tt>page</tt>的影响继续存在，现在所有的内容都扩展在整个网页上。要更改<tt>content</tt>左边和右边的空白，这样又有很宽的页面空白了。要使得整个页面看起来合适，新的页面空白看起来像：
<pre>#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; }</pre>


==隔离你的 CSS Challenges==

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

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

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

===给每个部分加边框===

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

border:solid 1px ''color''

在''颜色''的位置，为每个部分替换一个不同的颜色名称。
例如：

<pre>#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; }</pre>

保存CSS文件，并且网络浏览器上的网页（点击刷新按钮或者F5）。在每个部分的部分上，你会看到一个不同颜色的框。

<span style="padding:5px; border:solid 1px red">这是红色的框中突出的另一个部分。</span>

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

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

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

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

===突出某部分===

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

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


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

H1标题呈现给你的是明亮的<span style="color:red">red</span>而且看起来像：

要更改某个部分的背景色，你可以添加<tt>background:pink</tt>，使得整个背景呈现<span style="color:pink">'''pink'''</span>。

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

结果可能看起来像：

<div style="position:relative; padding:5px; border:dashed 1px blue; background:white;color:black">This is some text that goes on babbling here and there.

<span style="background:pink">This is some text with the background color changed so you can see it.</span>

<span style="background:pink">这些文本更改了颜色，这样你能够看到这些文本。</span>

这是返回正常形式的其余的文本</div>

整个标头部分现在拥有一个<span style="color:pink">'''粉红色'''</span>背景。当你识别了问题所在，并且解决了问题后，要确定移除了所有的测试属性，以重建网页外观。

===确认源代码===

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

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

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

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

===Slash and Burn - The Last Resort===

<span style="color:red">'''不适用于胆小的人'''</span>

''注: 有两个Slash and Burn方法。如果你胆子较小，请查看[[#WordPress:Gentle 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.在测试文件夹中，双击<tt>junk.html</tt>浏览你的浏览器中的文件。如果合适的话，你会看到带有图形的整个页面的布局。如果不行的话，再次检查样式表的链接reference。

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

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


====温和 Slash and Burn====

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

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

;拼写错误：众所周知，<tt>leftt</tt>与<tt>left</tt>不同，而且这可能导致某个内容本应该出现在网页的右边，最后却出现在了左边。在一个页面空白上放上一个<tt>30ps</tt>可能得不到什么结果，但是<tt>30px</tt>会起作用。拼写中遗漏字母的错误非常常见而且也很容易遭到忽视。幸运地是，CSS确认器总能够为我们找到这些错误。

;遗漏的详细信息：虽然你能够发挥创造力处理CSS，你仍然需要遵循一些基本的规则。每个选择器必须被标示为一个ID或者CLASS，除非这个选择器是一个HTML标签。必须被设置为<tt>选择器{ property: value; property: value; }</tt>而且必须有括号，冒号和分号。缺少任何一样，什么结果都不会产生或者会出现奇怪的结果。CSS确认器经常会为你找到这些容易遗漏的详细信息。

;错误的选择器：如果所有优秀的设计本应该放在<tt>#context-text</tt>而你却将其放在<tt>#content</tt>，那么设计就不会对你的布局起作用。幸运地是，浏览网页的时候，你通常能够发现到这一点，因此你只需要将这些设计剪切并且粘贴到合适的标签上，就可以了…然后，要记住，你从<tt>#content</tt>上删除了什么内容。当然，你可以查阅文件备份，找到丢失的代码。Hint-Hint!

;错误的模板模块：虽然WordPress新的模块模板很有用，用户许多时候会更改<tt>comments.php</tt> 而不是<tt>comments-popup.php</tt>或者更改了其它名称类似的文件。仔细地检查，你''应该''一直处理模块部分。如果你偶然地将每个模块搞糟了，可靠的文件备份，能够使得处理重新开始。

;多个选择：CSS不能够读懂你的思想。如果同一个选择器有两个references，而且这两个references信息相冲突，CSS需要决定使用哪个reference。如果你将最初的样式表放到了一个新的样式表的上方，这种情况出现很平常。如果你使用一个选择器，来争取，如<tt>h1</tt>标题，但是什么内容也没有改变，搜索样式表看看，那个选择器是不是有另一个reference。

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

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

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

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

*当你下滚网页的时候，文本开始跳动或者抖动。

*当你将鼠标移向一个链接的时候，链接和文本开始跳动。

*当你将鼠标移向链接列表的时候，链接列表会跳动。

*布局看起来不同。浏览器之间的栏会更宽或者更窄。

*图形覆盖了文本或者列表。

*特别的效果，例如filters看起来不是一样的或者根本就没有。

要帮助解决你的浏览器缺陷，请查看[[WordPress:CSS Fixing Browser Bugs|CSS解决浏览器程序缺陷]]中的建议和资源。