WordPress: CSS Troubleshooting：修订间差异

来自站长百科
跳转至： 导航、​ 搜索
无编辑摘要
无编辑摘要
 
（未显示同一用户的5个中间版本）
第3行： 第3行：
将网站布局弄得一团糟的时候，许多人会来到[http://www.wordpress.org/support/ WordPress 论坛]寻求帮助。虽然自愿的志愿者能够尽其所能地帮助你，你自己也可以采取一些步骤，来解决问题，或者至少能够知道问题处在哪里，然后再去访问论坛。
将网站布局弄得一团糟的时候，许多人会来到[http://www.wordpress.org/support/ WordPress 论坛]寻求帮助。虽然自愿的志愿者能够尽其所能地帮助你，你自己也可以采取一些步骤，来解决问题，或者至少能够知道问题处在哪里，然后再去访问论坛。


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


第38行： 第37行：


=== '''ID'''===
=== '''ID'''===
The '''ID''' is a reference to a specific unique area on your web page.  It is generally seen represented on your HTML web page as an enclosed DIV (division) block:


'''ID'''是网页上一个特别的独特的区域的references。一般这个ID会出现在HTML网页上，作为一个附加的DIV（分开）区：
'''ID'''是网页上一个特别的独特的区域的references。一般这个ID会出现在HTML网页上，作为一个附加的DIV（分开）区：
<pre><div id="header">Title of the Page</div></pre>
:In the style sheet (CSS) the '''ID''' selector is referenced as <tt>#header</tt> and might look like this:
<pre>#header { position: relative; margin:0; padding:0;
height:100px; width: 100%; background: red;
color: white;}</pre>


<pre><div id="header">网页标题</div></pre>
<pre><div id="header">网页标题</div></pre>
第54行： 第45行：
height:100px; width: 100%; background: red;
height:100px; width: 100%; background: red;
color: white;}</pre>
color: white;}</pre>
<pre>#header { position: relative; margin:0; padding:0;
height:100px; width: 100%; background: red;
color: white;}</pre>
===The '''CLASS'''===


=== '''CLASS'''===
=== '''CLASS'''===
The '''CLASS''' is a reference to any element on a page that needs to look a specific way when this reference is used.  For example, if you frequently want to highlight a word or two within your text (we'll use red as a highlight color in this instance), you might have a '''CLASS''' selector in your style sheet like this:


'''CLASS'''是网页上任何元素的一个reference，当网页上某个原始需要以一种特别方式显示的时候，就要用到reference。例如，如果你想要频繁地突出文本中的一个或者两个词（在这个例子中，我们将红色作为突出的颜色），你可能在样式表中需要一个像这样的'''CLASS'''选择器：
'''CLASS'''是网页上任何元素的一个reference，当网页上某个原始需要以一种特别方式显示的时候，就要用到reference。例如，如果你想要频繁地突出文本中的一个或者两个词（在这个例子中，我们将红色作为突出的颜色），你可能在样式表中需要一个像这样的'''CLASS'''选择器：
.hilite { color: red}
: and the reference in your HTML might look like this:
<pre>...this is some text about something
I want &lt;span class="hilite"&gt;in red&lt;/span&gt;. And
some more rambling here...</pre>


.hilite { 颜色: 红色}
.hilite { 颜色: 红色}
第82行： 第55行：
some more rambling here...</pre>
some more rambling here...</pre>


:As you can see, the difference between '''ID''' and '''CLASS''' selectors in the style sheet is that an '''ID''' uses a pound sign (#name) and a '''CLASS''' uses a period (.name).  '''ID''' references must be unique on a page and used once.  '''CLASS''' references can be used repeatedly in the same page.
;如你所见到的那样，样式表中'''ID''' 和 '''CLASS'''选择器的区别在于'''ID'''使用一个井号（#名称），而'''CLASS'''使用点号（.名称）。'''ID''' references在网页上必须是独特的，而且只能使用一次。'''CLASS''' references可以在同一个网页上多次使用。
 
；如你所见到的那样，样式表中'''ID''' 和 '''CLASS'''选择器的区别在于'''ID'''使用一个井号（#名称），而'''CLASS'''使用点号（.名称）。'''ID''' references在网页上必须是独特的，而且只能使用一次。'''CLASS''' references可以在同一个网页上多次使用。
 
===HTMLTags===


===HTML标签===
===HTML标签===
If you want to "design" a specific HTML tag reference, such as a <tt>blockquote</tt>, the code within the web page may look like this:


如果你想要"设计"一个特别的HTML标签reference，例如<tt>blockquote</tt>，网页内部的编码可能看起来像：
如果你想要"设计"一个特别的HTML标签reference，例如<tt>blockquote</tt>，网页内部的编码可能看起来像：
<pre><blockquote>This is a pithy and brilliant quote
that I knew you would enjoy.</blockquote></pre>


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


 
:在样式表中，<tt>blockquote</tt>的reference没有#或者点号，但是会列出HTML和设计元素。这个例子中，引用的两边都缩进了而且引用的左边有一个蓝行，同时引用文本也是斜体的。
:In the style sheet, the reference to the <tt>blockquote</tt> would not have a # or period but would just simply list the HTML and then the design elements.  This example indents the quote on both sides and puts a blue line on the left side of the quote and makes the text italic.
 
；在样式表中，<tt>blockquote</tt>的reference没有#或者点号，但是会列出HTML和设计元素。这个例子中，引用的两边都缩进了而且引用的左边有一个蓝行，同时引用文本也是斜体的。
 
<pre>blockquote { position: relative; margin: 10px 50px 10px 50px;
<pre>blockquote { position: relative; margin: 10px 50px 10px 50px;
padding:5px;  font-style:italic;  
padding:5px;  font-style:italic;  
border-left:solid blue 4px; }</pre>
border-left:solid blue 4px; }</pre>


 
:你可以在任何特别的HTML标签上应用任何设计元素，如<tt>body, p, H1, H2, H3, ul, li,</tt>以及更多的。
<pre>blockquote { position: relative; margin: 10px 50px 10px 50px;
padding:5px;  font-style:italic;
border-left:solid blue 4px; }</pre>
 
 
:You can apply any design elements to any specific HTML tag such as <tt>body, p, H1, H2, H3, ul, li,</tt> and more.
 
；你可以在任何特别的HTML标签上应用任何设计元素，如<tt>body, p, H1, H2, H3, ul, li,</tt>以及更多的。
 
For information on modifying '''ID''', '''CLASS''', and HTML, check out the resources at [[WordPress:CSS|WordPress' CSS Tips, Techniques and Resources]].


关于更改'''ID''', '''CLASS''', 和HTML的信息，请查看[[WordPress:CSS|WordPress的CSS 小贴士，方法和资源]]。
关于更改'''ID''', '''CLASS''', 和HTML的信息，请查看[[WordPress:CSS|WordPress的CSS 小贴士，方法和资源]]。
Important note! Certain themes have their css styles in more than once place, the Kubrick theme being one of them.  If, after changing css attributes in a css file, you don't see the results you wish, it's possible your theme choice has some embedded css in one of the php files (usually a header file) and the embedded css styles are overriding the linked or imported css stylesheet.


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


==检查你的 HTML和 CSS==
==检查你的 HTML和 CSS==


In order to determine what is going right or wrong with your web page layout, you have to go to the source.  This means looking under the hood.
为了要决定网页设计上哪些元素是合适的，哪些是不合适的，你需要返回到原始资料。这意味着你要深入地观看。
 
为了要明了网页设计上哪些元素是合适的，哪些是不合适的，你需要返回到原始资料。这意味着你要深入地观看。
 
Under the pretty hood of your web page, the nice layout you see on your Internet browser, is a whole bunch of code with strange and foreign sounding references.  At first glance, it's like looking under the hood of a racing car.  You know that all of that junk makes the car go, but what the heck is all that mess under the hood?


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


'''查看 HTML'''
'''查看 HTML'''
:To lift the hood on your page, make sure the page is being viewed from your web browser and from within your web browser's top menu, click VIEW > SOURCE or PAGE SOURCE.  Another page will pop-up either inside another browser window or inside of a program that comes with your operating system called Notepad, or some variation thereof.  This is your HTML page which structures your page.
;深层次地查看网页，确定网页能够被网页浏览器浏览，从你的网页浏览器的顶端菜单上，点击查看 > 原始资料或者网页原始资料。另一个网页会弹出，在你的另一个浏览器窗口的内部或者在称作Notepad的操作系统的程序内部，或者其它操作系统程序内部。这是你的HTML网页，这个网页支持了你的网页的结构。
;深层次地查看网页，确定网页能够被网页浏览器浏览，从你的网页浏览器的顶端菜单上，点击查看 > 原始资料或者网页原始资料。另一个网页会弹出，在你的另一个浏览器窗口的内部或者在称作Notepad的操作系统的程序内部，或者其它操作系统程序内部。这是你的HTML网页，这个网页支持了你的网页的结构。


'''Viewing CSS'''
'''查看 CSS'''
:To view your CSS, either know the actual address (or have it already on your hard drive), or scroll down through the HTML page to the following reference:
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
；要查看CSS，了解真正的地址（后者已经将CSS放入硬盘中），或者下滚至HTML网页中的reference:
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
:This is the link that loads in your attached CSS style sheet. To view your CSS, either double click on the file name or type in the specific link to the file in your web browser such as:


;这个链接会载入到你附加的CSS样式表上。要查看CSS，双击文件名或者在你的网络浏览器文件上输入特别的链接，如：
;这个链接会载入到你附加的CSS样式表上。要查看CSS，双击文件名或者在你的网络浏览器文件上输入特别的链接，如：
<nowiki>http://www.yoursite.com/wordpress/wp-content/themes/default/style.css</nowiki>
<nowiki>http://www.yoursite.com/wordpress/wp-content/themes/default/style.css</nowiki>
In WordPress, PHP is used to actually generate the HTML page.  This is often complex and confusing code. To view the HTML, view a generated page, such as a sample post.  To make changes in the HTML structure and CSS references, you will need to modify the appropriate PHP file. [[WordPress:Using Themes|The Codex page on using themes]] has more information on how to view your Theme Templates and find out which Template is associated with which section on your page.
在WordPress中，PHP是用来真正地产生HTML网页的，通常是复杂的，使人感到疑惑的编码。要查看HTML，请先查看一个网页，例如一篇文章样本。要更改HTML结构和CSS references，你需要更改适当的PHP文件。[[WordPress:Using Themes|关于使用主题的Codex 网页]]有更多的信息，关于怎样查看你的主题模板，找出哪个模板与你的网页上的哪个部分相联系。
在WordPress中，PHP是用来真正地产生HTML网页的，通常是复杂的，使人感到疑惑的编码。要查看HTML，请先查看一个网页，例如一篇文章样本。要更改HTML结构和CSS references，你需要更改适当的PHP文件。[[WordPress:Using Themes|关于使用主题的Codex 网页]]有更多的信息，关于怎样查看你的主题模板，找出哪个模板与你的网页上的哪个部分相联系。
The problem-solving techniques herein describe how to change the CSS to influence the layout of the page.  To make actual changes to the Themes, check out [[WordPress:Theme Development]].


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


===深入查看 CSS===
===深入查看 CSS===
Once you have lifted the hood to see the HTML and CSS, it is time to start playing Sherlock Holmes.  To start, you have to know what you are looking at and where to find the basic elements to help you find the culprit.


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


The HTML page features all the structural code that sets up the "grid" into which your page sits.  Think of it as a map with notes written all over it.  The notes are actually pointers to the directions which are found within the CSS file.
HTML网页拥有所有的结构编码，能够为你的站点所处的"位置"建立网格。将HTML网页看做是一张地图，地图上写满了注释。这些注释事实上是指示器，指向CSS文件中的一些方向。
 
HTML网页拥有所有的结构编码，能够为你的站点所处的"位置"。将HTML网页看做是一张地图，地图上写满了注释。这些注释事实上是指示器，指向CSS文件中的一些方向。
 


Scroll down past a lot of <tt><link rel='archives'...</tt> information until you see <tt><body></tt>.  Below this will be the layout "body" of your web page.  From here on, every bit of information is critical to the structure and design of your page.
向下滚动，浏览过许多<tt><link rel='archives'...</tt>信息，直到你看到了<tt><body></tt>。这个的下面就是网页布局的"主体"。在这个部分中，每一点信息对于网页的结构和设计，都至关重要。
 
向下滚动，浏览过许多<tt><link rel='archives'...</tt>信息，直到你看到了<tt><主体部分></tt>。这个的下面就是网页布局的"主体"。在这个部分中，每一点信息对于网页的结构和设计，都至关重要。
 
As you scroll through it, look for identifying ID and '''CLASS''' statements.  For example, you may see the following:


继续向下滚动，查看识别的ID和 '''CLASS'''声明。例如，你可能会看到：
继续向下滚动，查看识别的ID和 '''CLASS'''声明。例如，你可能会看到：
第203行： 第108行：
<div id="content" class="widecolumn">
<div id="content" class="widecolumn">
   <div class="post"></pre>
   <div class="post"></pre>
<pre><div id="page">
<div id="header">
<h1>我的WordPress 站点</h1>
<div id="headerimg">
</div>
<div class="描述">by Me and Only Me</div>
</div>
<div id="内容" class="widecolumn">
  <div class="post"></pre>
This may look confusing, but it is basically setting up sections with your content in it.


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


It begins with the division called "page" which sets up the look of the entire page.  If you look in the CSS file for <tt>#page</tt> selector, you will see the presentation styles associated with it. It is followed by the <i>header</i> division which includes a heading (<tt>H1</tt>) with the title of your site.  This particular layout is based upon the default [[WordPress:Using Themes|Theme for WordPress v1.5 called Kubrick]] which includes an image in the header, set by the <i>"headerimg"</i> division.  After that comes a division with a '''CLASS''' reference called <i>"description"</i> which is the place you have a subtitle or description of your site.  Again, look in your CSS to find <tt>.description</tt> to find out how that area is styled. 
以一个称为"网页"，设置了整个网页的外观的部分开始。如果你在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> 了解，这个部分是如何设计的。


它以一个称为"网页"，设置了整个网页的外观的模块开始。如果你在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> 了解这个部分是如何设计的。


The next two tags close the <i>header</i> (<tt></div></tt>) and then begins the division ID of <i>"content"</i> which also features a '''CLASS''' called <i>"widecolumn"</i>, followed by another '''CLASS''' called <i>"post"</i>.  The <i>"content"</i> and <i>"widecolumn"</i> layout the overall look of the containers holding your <i>"post"</i>.
接着的两个标签关闭了<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>那个部分。


接着的两个标签关闭了<i>标题</i> (<tt></div></tt>)，然后是<i>"内容"</i>部分ID，也有一个'''CLASS'''，称为<i>"widecolumn"</i>，紧跟着另一个'''CLASS'''，称为<i>"文章"</i>。<i>"内容"</i> 和 <i>"widecolumn"</i>布局了持有你的r <i>"文章"</i>那个部分。
This is an example of the parent/child relationship.  And, as you will see in the next section, this is one of the major places where CSS layout problems begin!


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


=== CSS 母子关系===
=== CSS 母子关系===
One of the biggest problems in designing web pages is understanding where a problem occurs and whose influence might be affecting the problem.  This is called the "parent/child relationship" of CSS.  As you know, while parents usually have their children's best intentions at heart, children often feel intimidated and screwed up by their parents, so understanding this relationship may help you solve your problems.


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


A WordPress user posted a question on the forum complaining that she wanted her page to feature her <tt>header</tt> spreading fully across the page's width with the content centered on the page with a lot of space on the left and right sides.  She's been poking around with the margins in her <tt>header</tt> to no avail and turned to us for help.
一个WordPress用户在论坛上发表一个问题，她想要自己的网页上的<tt>header</tt>在网页上完全地扩展，同时内容要出现在网页的中间，左边和右边都有非常大的空间。她一直尝试处理<tt>header</tt>周围的空白，但是一直没有效果，因此向我们求助。
 
一个WordPress用户在论坛上发表一个问题，她想要自己的网页上的<tt>标头</tt>在网页上完全地扩展，同时内容要出现在网页的中间，左边和右边都有非常大的空间。她一直尝试处理<tt>标头</tt>周围的空白，但是一直没有效果，因此向我们求助。


<pre><div id="page">
<pre><div id="page">
第253行： 第129行：
  <div id="content">
  <div id="content">
   <div class="post">Post babble here...</div></pre>
   <div class="post">Post babble here...</div></pre>
<pre><div id="page">
<div id="标头">标头标题</div>
<div id="内容">
  <div class="post">Post babble here...</div></pre>
The CSS attributes for the margins in this example are:


这个例子中，CSS页面空白的属性是：
这个例子中，CSS页面空白的属性是：
第272行： 第141行：
margin-bottom: 5px; margin-left:5px; }</pre>
margin-bottom: 5px; margin-left:5px; }</pre>


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


<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>
Playing detective with her codes, we found that changing the margins on the <tt>header</tt> weren't working because they were being influenced by the <tt>page</tt> margins to begin with. This is where the parent/child relationship shows up.  The parent <tt>page</tt> was telling the child <tt>header</tt> what to do and it wanted to do something else.
仔细观察这个编码，会发现更改<tt>标头</tt>上的页面空白，不起作用，因为标头页面空白本来是由<tt>页面</tt>空白控制的。这里正显示了母/子关系。母<tt>页面</tt>告诉子<tt>标头</tt>做什么，但是子标头想要做其它的事情。
If we changed the right and left margins of <tt>page</tt>, it eliminated the margin problems for the <tt>header</tt>.  But we've created another problem.  The parent <tt>page</tt> continues its influence and now all of the content is spread across the whole page width.  A change needed to also happen with the left and right margins of the <tt>content</tt> so the wide margins are back in place.  To make the whole family happy, the new margins looked like this:
如果我们更改了<tt>页面</tt>左边和右边的空白，便解决了<tt>标头</tt>的问题，但是我们又由此产生了另一个问题。母<tt>网页</tt>的影响继续存在，现在所有的内容都扩展在整个网页上。要更改<tt>内容</tt>左边和右边的空白，这样又有很宽的页面空白了。要使得整个页面看起来合适，新的页面空白看起来像：


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


<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>
==Isolate Your CSS Challenges==


==隔离你的 CSS Challenges==
==隔离你的 CSS Challenges==
Identifying the parent/child relation influences over your web page layout helps to solve a lot of problems, but sometimes the relationships are so complex, it's hard to figure out which section is which and who has influence over which parts.


识别母/子关系对于网页的布局的影响，能够帮助解决许多问题，但是有时候，母/子关系非常复杂，很难了解哪个部分是哪个部分，哪个部分影响了哪个部分。
识别母/子关系对于网页的布局的影响，能够帮助解决许多问题，但是有时候，母/子关系非常复杂，很难了解哪个部分是哪个部分，哪个部分影响了哪个部分。
To isolate and identify your various CSS sections, divisions, and classes, here are some simple tricks.  Before you begin, be sure and '''make a backup''' of all of your main files including your CSS to make sure you have something to recover from if this gets out of control.


要隔离和确认不同的CSS部分，divisions和classes，下面有几个简单的方法。开始之前，要确定给所有的主要文件包括CSS都'''做了备份'''，以确定当处理不当的时候，你还能够返回到原文件。
要隔离和确认不同的CSS部分，divisions和classes，下面有几个简单的方法。开始之前，要确定给所有的主要文件包括CSS都'''做了备份'''，以确定当处理不当的时候，你还能够返回到原文件。
Once you have identified the culprit and fixed it, make sure you remove these testing features so your web page will look "normal" again.


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


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


Once you have identified the various sections or divisions within your HTML page, go into your CSS file and add the following attribute to the various divisions:
一旦确认了HTML网页不同的部分或者divisions，进入你的CSS文件，并且给不同的部分，添加以下的属性：
 
一旦确认了HTML网页总不同的部分或者divisions，进入你的CSS文件，并且给不同的部分，添加以下的属性：
 
border:solid 1px ''color''


border:solid 1px ''color''
border:solid 1px ''color''
Where the word ''color'' is, put a different color name in place for each section.


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


第352行： 第177行：
border: solid 1px green; }
border: solid 1px green; }
.post { margin:5px; padding:10px; border: solid 1px yellow; }</pre>
.post { margin:5px; padding:10px; border: solid 1px yellow; }</pre>
<pre>#网页{ margin:5px; padding:0; border: solid 1px red; }
#标头{ margin: 10px; padding: 5px; border: solid 1px blue; }
#内尔{ margin:5px 100px 5px100px; padding:10px;
border: solid 1px green; }
.文章{ margin:5px; padding:10px; border: solid 1px yellow; }</pre>
Save the CSS file and view your page (click REFRESH or F5) in the web browser.  You should now see a different colored box around each of the different sections:
<div style="position:relative; padding:5px; border:dashed 1px blue; background:white;color:black">This is a section of rambling text that goes on and on.


保存CSS文件，并且网络浏览器上的网页（点击刷新按钮或者F5）。在每个部分的部分上，你会看到一个不同颜色的框。
保存CSS文件，并且网络浏览器上的网页（点击刷新按钮或者F5）。在每个部分的部分上，你会看到一个不同颜色的框。
<span style="padding:5px; border:solid 1px red">This is another section that has been highlighted in a red box.</span>


<span style="padding:5px; border:solid 1px red">这是红色的框中突出的另一个部分。</span>
<span style="padding:5px; border:solid 1px red">这是红色的框中突出的另一个部分。</span>
This is the rest of the text back to normal.</div>


这是返回正常形式的文本的剩余部分。</div>
这是返回正常形式的文本的剩余部分。</div>
If you don't see a colored box around your content, check again that the selector you changed is actually the correct spelling and identified in the HTML.


如果在内容的周围，你没有看见一个带有颜色的框，核查你更改的选择器，有没有正确地拼写了，有没有在HTML中得到了识别。
如果在内容的周围，你没有看见一个带有颜色的框，核查你更改的选择器，有没有正确地拼写了，有没有在HTML中得到了识别。
If the problem you are having is in the blue box, then you know where to start solving your problems.  Be sure and remove the test attributes when you're done.


如果问题源于蓝色的框，那么你知道可以从哪里开始解决问题。完成后，确定移除了测试属性。
如果问题源于蓝色的框，那么你知道可以从哪里开始解决问题。完成后，确定移除了测试属性。
If you use Firefox as your browser there's a handy extension that does this for you, and makes troubleshooting css problems a whole lot easier. The Plugin is called Aardvark and is available for free at [http://www.karmatics.com/aardvark/ http://www.karmatics.com/aardvark/]. A demo is available for test drives.


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


===Highlight Sections===
===突出某部分===
===突出某部分===


Besides putting boxes around the different sections to isolate the problem CSS or HTML, you can dramatically change the colors of the content to make the problem "jump" right out at you.  By changing the text color or background color of a section, you will spot it immediately when you view the screen. <i>'''Note:''' Be sure and make note of the original colors if you change them during testing so you can go back to them.  And make frequent backups!</i>
除了在不同部分的周围加上边框，隔离有问题的CSS或者HTML外，你可以快速地更改文章的内容的颜色，使得问题一下子"出现在"你的眼前。通过更改字体的颜色和某个部分的背景色，当你查看网页的时候，你一眼就能发现问题所在。<i>'''注:'''确定记录了原始的颜色，这样即使测试时更改了颜色，随后也可以返回原色。同时，要不断地做文件备份！ </i>
 
除了在不同部分的周围加上边框，隔离有问题的CSS或者HTML外，你可以快速地更改文章的内容的颜色，使得问题一下子"出现在"你的眼前。通过更改字体的颜色和某个部分的背景色，当你查看网页的时候，你一眼就能发现问题所在。<i>'''注:'''确定记录了原始的颜色，这样如果即使测试时更改了颜色，随后也可以返回原色。同时，要不断地做文件备份！ </i>
 
In the CSS file, you can change a section's font color by adding <tt>color:red</tt> or any other color to the selector's attributes such as:


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


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


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


The H1 heading should jump out at you in bright <span style="color:red">red</span> and would look like this:
H1标题呈现给你的是明亮的<span style="color:red">red</span>而且看起来像：
 
H1标题呈现给你的是明亮的<span style="颜色:红色">红色</span>而且看起来像：


To change the background color of a section, you can add <tt>background:pink</tt> to make the entire background <span style="color:pink">'''pink'''</span>.
要更改某个部分的背景色，你可以添加<tt>background:pink</tt>，使得整个背景呈现<span style="color:pink">'''pink'''</span>。
 
要更改某个部分的背景色，你可以添加<tt>背景色:粉红色</tt>，使得整个背景呈现<span style="颜色:粉红色">'''粉红色'''</span>。


  #header { margin:5px; padding: 10px; background:pink; }
  #header { margin:5px; padding: 10px; background:pink; }
#标头 { margin:5px; padding: 10px; background:pink; }
The result might look like this:


结果可能看起来像：
结果可能看起来像：
<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.


<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.
<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.
第424行： 第213行：
<span style="background:pink">这些文本更改了颜色，这样你能够看到这些文本。</span>
<span style="background:pink">这些文本更改了颜色，这样你能够看到这些文本。</span>


This is the rest of the text back to normal.</div>
这是返回正常形式的其余的文本</div>
 
这是正常颜色的文本。</div>
 
The entire header division will now feature a <span style="color:pink">'''pink'''</span> background. When you've identified the culprit, and made the fixes, be sure and remove any testing attributes to restore the look of your web page.


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


===确认源代码===
===确认源代码===
Sometimes the smallest detail can send your page out of whack.  A mispelled tag (<tt>rhef</tt> instead of <tt>href</tt>), a forgotten closing tag, a missing attribute, or even the wrong attribute can send your page into a design tail spin.


有时候，一个极小的错误会使得你的网页变得紊乱。一个拼写错误的标签(<tt>rhef</tt> 而不是 <tt>href</tt>)，一个忘记关闭的标签，一个丢掉的属性，或者甚至错误的属性，都会使你的网页陷入紊乱。
有时候，一个极小的错误会使得你的网页变得紊乱。一个拼写错误的标签(<tt>rhef</tt> 而不是 <tt>href</tt>)，一个忘记关闭的标签，一个丢掉的属性，或者甚至错误的属性，都会使你的网页陷入紊乱。
Free online validators which check your HTML, XML, and CSS code may help isolate the little detail you are missing.  As you scan through the code, it's easy to skip over a little stumble.  Most online validators let you either type in the URI (link) to your site to initate the validation process, or may even allow you to paste in code or upload a file to have it inspected. WordPress, by default, validates its default coding, but if you are making modifications, the slightest slip can screw things up.


免费的在线确认器能够帮助你检查HTML，XML和CSS编码，帮助你处理丢掉的内容。当你浏览代码的时候，要跳过一些小错误非常简单。大多数在线确认器向你的站点输入URI（链接），开始确认，或者让你粘贴代码或者上传文件，让它确认。默认情况下，WordPress会确认默认的代码，但是如果你做了更改，一点小小的改动，都会使得网页变得一团糟。
免费的在线确认器能够帮助你检查HTML，XML和CSS编码，帮助你处理丢掉的内容。当你浏览代码的时候，要跳过一些小错误非常简单。大多数在线确认器向你的站点输入URI（链接），开始确认，或者让你粘贴代码或者上传文件，让它确认。默认情况下，WordPress会确认默认的代码，但是如果你做了更改，一点小小的改动，都会使得网页变得一团糟。
Different validators check for different problems, so if you can't find your solution with one validator, try another.  Many validators will even recommend making some changes, but find your problem before you start creating new ones.


不同的确认器检查不同的问题，因此如果你使用一个确认器不能够找到解决方法，你可以尝试使用另一个。许多validators甚至会推荐做一些其它的更改，但是先找到你的问题所在，再做更改。
不同的确认器检查不同的问题，因此如果你使用一个确认器不能够找到解决方法，你可以尝试使用另一个。许多validators甚至会推荐做一些其它的更改，但是先找到你的问题所在，再做更改。
To help you understand more about validation and to find online validators, we've provided a list of validation resources in a Codex article called [[WordPress:Validating a Website]].


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


===Slash and Burn - The Last Resort===
===Slash and Burn - The Last Resort===
===Slash and Burn - The Last Resort===
<span style="color:red">'''Not for the timid'''</span>


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


''NOTE: There are two Slash and Burn techniques.  If you are weak of heart, check out the [[WordPress:#Gentle Slash and Burn|second one]].''
''注: 有两个Slash and Burn方法。如果你胆子较小，请查看[[#WordPress:Gentle Slash and Burn|第二个]]。''
 
''注: 有两个Slash and Burn方法。如果你胆子较小，请查看[[WordPress:#Gentle Slash and Burn|第二个]]。''
 
If you can't seem to narrow down the problem, there is a technique, sometimes called "Slash and Burn", that will help you narrow down the culprit.  '''It requires no interuptions, concentration and thorough backups to ensure you don't destroy even the screwed up remains of your web page design.'''  We also recommend you have familiarity with HTML and CSS.


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


1. Make backups of all of your files.
1.备份所有的文件。
1.备份所有的文件。
2. Open a post in the web browser and VIEW > SOURCE.
2.在网络浏览器中打开一篇文章并且浏览>源代码。
2.在网络浏览器中打开一篇文章并且浏览>源代码。
3. Save this source file as a text document called "junk.html" to an empty test folder on your hard drive. DO NOT CLOSE THIS FILE.  It will remain open during this entire process.
3．将这个源文件以一个文本文档保存，称为"junk.html"，保存到你的硬盘中的一个空的测试文件夹中。不要关闭这个文件。在这个过程中，这个文件都是打开的。
3．将这个源文件以一个文本文档保存，称为"junk.html"，保存到你的硬盘中的一个空的测试文件夹中。不要关闭这个文件。在这个过程中，这个文件都是打开的。
4. Copy your CSS file to the same test folder.
4.将你的CSS文件复制到同一个测试文件夹中。
4.将你的CSS文件复制到同一个测试文件夹中。
5. If you are having problems with the graphics, copy the graphics folder or the graphics to the test folder.
5.如果你处理图形的时候，遇到了麻烦，将图形文件夹或者图形复制到测试文件夹中。
5.如果你处理图形的时候，遇到了麻烦，将图形文件夹或者图形复制到测试文件夹中。
6. In the junk.html source file, change the style sheet reference from something like
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
to this:
<link rel="style sheet" type="text/css" href="style.css">
: Save the junk.html text file (DO NOT CLOSE IT).
6.在junk.html源文件中，将类似：
6.在junk.html源文件中，将类似：
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
的样式表reference更改为：
的样式表reference更改为：
<link rel="style sheet" type="text/css" href="style.css">
<link rel="style sheet" type="text/css" href="style.css">
: 保存 junk.html 文本文件 (不要将它关闭)。
: 保存 junk.html 文本文件 (不要将它关闭)。
7. In the test folder, double click on <tt>junk.html</tt> to view the file in your browser.  You should see the general layout of the page with the graphics, if appropriate.  If not, double check the link reference to the style sheet.
7.在测试文件夹中，双击<tt>junk.html</tt>浏览你的浏览器中的文件。如果合适的话，你会看到带有图形的整个页面的布局。如果不行的话，再次检查样式表的链接reference。
7.在测试文件夹中，双击<tt>junk.html</tt>浏览你的浏览器中的文件。如果合适的话，你会看到带有图形的整个页面的布局。如果不行的话，再次检查样式表的链接reference。
8. In your <tt>junk.html</tt> text file, move to the point where the trouble begins.  Move to the section above (a section which includes opening and closing tags such as: <pre><p>babble...</p></pre>
:or
<pre><div class="post">babble...</div></pre>
:and highlight the entire section from the opening tag to the closing tag and CUT the section (Cntrl+X).


8.在你的<tt>junk.html</tt>文本文件中，转到问题开始发生的位置。进入上述的部分（包括有开始的和结束的标签的部分，例如：
8.在你的<tt>junk.html</tt>文本文件中，转到问题开始发生的位置。进入上述的部分（包括有开始的和结束的标签的部分，例如：
第508行： 第252行：
<pre><div class="post">babble...</div></pre>
<pre><div class="post">babble...</div></pre>
：并且从开始标签到结束标签，突出整个部分，并且剪贴这个部分(Cntrl+X)。
：并且从开始标签到结束标签，突出整个部分，并且剪贴这个部分(Cntrl+X)。
9. Save the file.
9.保存文件。
9.保存文件。
10. REFRESH the web page in the web browser (F5 or click REFRESH - if you have problems and don't see a change, hold the SHIFT key then press F5 or (in FireFox) simultaneously hold down Cntrl+Shift+R).
10.在网页浏览器上刷新网页（F5或者点击刷新-如果出现了问题，你没有看到什么变化，按住SHIFT 键然后安装 F5 或者（在FireFox中）同时按住Cntrl+Shift+R)。
10.在网页浏览器上刷新网页（F5或者点击刷新-如果出现了问题，你没有看到什么变化，按住SHIFT 键然后安装 F5 或者（在FireFox中）同时按住Cntrl+Shift+R)。
11. You should see the removed section missing.  Check below to see if this fixed the problem or if it went away.  If yes, this section is your problem.  If not, go to the next step.
11.你会发现移除的部分，不见了。继续检查看看，问题是不是解决了，或者问题是不是除掉了。如果是的，那个移除部分就是问题所在，如果问题仍然存在，那么继续下面的步骤。
11.你会发现移除的部分，不见了。继续检查看看，问题是不是解决了，或者问题是不是除掉了。如果是的，那个移除部分就是问题所在，如果问题仍然存在，那么继续下面的步骤。
12. If the problem is still there, move back to the <tt>junk.html</tt> file and put the cursor in the place where you deleted the section, if the cursor has moved.  PASTE the cut section back in (Cntrl+V).  Move to another section above or below this point and repeat steps 8 through 12.
12.如果问题仍然存在，返回到<tt>junk.html</tt>文件，如果指针已经移动了，将鼠标指针放到你删除某个部分的位置。粘贴返回剪贴的部分(Cntrl+V)。从这里开始向上或者向下移动，并且在第十二步中重复第八步的操作。
12.如果问题仍然存在，返回到<tt>junk.html</tt>文件，如果指针已经移动了，将鼠标指针放到你删除某个部分的位置。粘贴返回剪贴的部分(Cntrl+V)。从这里开始向上或者向下移动，并且在第十二步中重复第八步的操作。
At some point in this process, you will see the problem either fix itself or disappear.  Begin with large sections and when you find the large section problem area, break it up into smaller pieces.  Eventually, you will isolate the area that is causing you grief. Note the CSS references to identify the troublesome section and start making changes to the CSS file to fix it.


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


====Gentle Slash and Burn====


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


To use the ''gentle'' version of slash and burn, instead of deleting the sections as shown above, cut and paste them into Notepad or another text editor so they are protected in case you get distracted from the cut and paste process.  ALWAYS back everything up as you go along, ''just in case'' (which happens a lot more than you might think!).
要使用slash和burn的''温和''版本，而不是如上所述的删除整个部分，将这些部分剪切并且粘贴到记事本或者其它的文本编辑器中，这样你处理剪切和粘贴过程有所失误的时候，这个部分仍然得到了保护。处理这些的时候，要经常地做文件备份，''以防万一'' (什么你意想不到的情况发生!)。
 
要使用slash和burn的''温和''版本，而不是如上所述的删除整个部分，将这些部分剪贴并且粘贴到记事本或者其它的文本编辑器中，这样你处理剪贴和粘贴过程有所失误的时候，这个部分仍然得到了保护。处理这些的时候，要经常地做文件备份，''以防万一'' (什么你意想不到的情况发生!)。
 
==Common Errors==
 
==常见错误==
==常见错误==
We all make mistakes. The word "typo" wasn't invented without reason.  Here are some of the most common problems that creep up with CSS.


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


; Missed Spellings : Just so you know, <tt>leftt</tt> is not the same as <tt>left</tt> and this could be the reason something is on the right instead of the left side of your page.  Putting a <tt>30ps</tt> for a margin won't get much of a result, but <tt>30px</tt> will.  Missed spelling errors are common and easy to overlook.  Luckily, CSS validators can often catch these tiny mistakes for us.
;拼写错误：众所周知，<tt>leftt</tt>与<tt>left</tt>不同，而且这可能导致某个内容本应该出现在网页的右边，最后却出现在了左边。在一个页面空白上放上一个<tt>30ps</tt>可能得不到什么结果，但是<tt>30px</tt>会起作用。拼写中遗漏字母的错误非常常见而且也很容易遭到忽视。幸运地是，CSS确认器总能够为我们找到这些错误。
 
；拼写错误：众所周知，<tt>leftt</tt>与<tt>left</tt>不同，而且这可能导致某个内容本应该出现在网页的右边，最后却出现在了左边。在一个页面空白上放上一个<tt>30ps</tt>可能得不到什么结果，但是<tt>30px</tt>会起作用。拼写中遗漏字母的错误非常常见而且也很容易遭到忽视。幸运地是，CSS确认器总能够为我们找到这些错误。
 
; Forgotten Details : As creative as you can be with CSS, there are some ground rules you have to follow.  Every selector must be identified as an ID or CLASS unless it is a HTML TAG.  It must be laid out as  <tt>selector { property: value; property: value; }</tt> and the braces, colon and semi-colon must be there. Miss one of these little details and nothing will happen, or strange things might.  CSS validators will usually catch these little forgotten details for you.
 
；遗漏的详细信息：虽然你能够发挥创造力处理CSS，你仍然需要遵循一些基本的规则。每个选择器必须被标示为一个ID或者CLASS，除非这个选择器是一个HTML标签。必须被设置为<tt>选择器{ property: value; property: value; }</tt>而且必须有括号，冒号和分号。缺少任何一样，什么结果都不会产生或者会出现奇怪的结果。CSS确认器经常会为你找到这些容易遗漏的详细信息。
 
; Wrong Selector : Putting all your wonderful designs in <tt>#content</tt> when they were supposed to be in <tt>#context-text</tt> doesn't help your layout.  Luckily, you can usually see these immediately upon viewing the page, so just cut and paste them in the right tag...and then remember what you deleted from <tt>#content</tt>. Of course, you can refer to your frequently backed-up file to get the lost code.  Hint-Hint!
 
；错误的选择器：如果所有优秀的设计本应该放在<tt>#context-text</tt>而你却将其放在<tt>#content</tt>，那么设计就不会对你的布局起作用。幸运地是，浏览网页的时候，你通常能够发现到这一点，因此你只需要将这些设计剪贴并且粘贴到合适的标签上，就可以了…然后，要记住，你从<tt>#content</tt>上删除了什么内容。当然，你可以查阅文件备份，找到丢失的代码。Hint-Hint!
 
; Wrong Template Module : As useful as WordPress' new modular templates are, many a time a user has made a modification in <tt>comments.php</tt> instead of <tt>comments-popup.php</tt> or other similarly named files by mistake.  Double check which modular section you are ''supposed'' to be working on all the time.  And if you mess one up by accident, there is always that faithful backup file to make things new again.


；错误的模板模块：虽然WordPress新的模块模板很有用，用户许多时候会更改<tt>comments.php</tt> 而不是<tt>comments-popup.php</tt>或者更改了其它名称类似的文件。仔细地检查，你''应该''一直处理的模块部分。如果你偶然地将每个模块搞糟了，可靠的文件备份，能够使得处理重新开始。
;遗漏的详细信息：虽然你能够发挥创造力处理CSS，你仍然需要遵循一些基本的规则。每个选择器必须被标示为一个ID或者CLASS，除非这个选择器是一个HTML标签。必须被设置为<tt>选择器{ property: value; property: value; }</tt>而且必须有括号，冒号和分号。缺少任何一样，什么结果都不会产生或者会出现奇怪的结果。CSS确认器经常会为你找到这些容易遗漏的详细信息。


; Multiple Choice : CSS can't read your mind.  If there are two references to the same selector with conflicting information, it has to decide which one it will use.  This is very common if you are bringing your original style sheet in on top of a new one.  If you are fighting with a selector for, say, the <tt>h1</tt> heading, and nothing is changing, search through the style sheet to see if there is another reference to that selector.
;错误的选择器：如果所有优秀的设计本应该放在<tt>#context-text</tt>而你却将其放在<tt>#content</tt>，那么设计就不会对你的布局起作用。幸运地是，浏览网页的时候，你通常能够发现到这一点，因此你只需要将这些设计剪切并且粘贴到合适的标签上，就可以了…然后，要记住，你从<tt>#content</tt>上删除了什么内容。当然，你可以查阅文件备份，找到丢失的代码。Hint-Hint!


；多个选择：CSS不能够读懂你的思想。如果同一个选择器有两个references，而且这两个references信息相冲突，CSS需要决定使用哪个reference。如果你将最初的样式表放到了一个新的样式表的上方，这种情况出现很平常。如果你使用一个选择器，来争取，如<tt>h1</tt>标题，但是什么内容也没有改变，搜索样式表看看，那个选择器是不是有另一个reference。
;错误的模板模块：虽然WordPress新的模块模板很有用，用户许多时候会更改<tt>comments.php</tt> 而不是<tt>comments-popup.php</tt>或者更改了其它名称类似的文件。仔细地检查，你''应该''一直处理模块部分。如果你偶然地将每个模块搞糟了，可靠的文件备份，能够使得处理重新开始。


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


==程序错误控制 –提防浏览器程序缺陷==
==程序错误控制 –提防浏览器程序缺陷==
No matter how hard we try to make our web pages beautiful, it can take the viewing of the web page in a different browser to totally screw up our lovely design.


不管我们怎么努力使我们的网页看起来更加地美观，在不同的浏览器上查看网页，会看到我们美丽的设计已经变得一团糟。
不管我们怎么努力使我们的网页看起来更加地美观，在不同的浏览器上查看网页，会看到我们美丽的设计已经变得一团糟。
Different browsers view web pages differently.  Older browsers won't recognize new CSS standards, while newer ones often "see" things differently from their brethren.  The results are often not pretty, causing blinking, jumping, or missing design elements, shifting layouts, and distorted positions.


不同的浏览器阅读网页的方式不同。旧的浏览器不会识别新的CSS标准，然而新的浏览器与过去的浏览器"阅读"内容的方式是不同的。结果通常不尽人意，会产生内容的错位，移动，或者会丢失设计元素，更改布局，并且移动了位置。
不同的浏览器阅读网页的方式不同。旧的浏览器不会识别新的CSS标准，然而新的浏览器与过去的浏览器"阅读"内容的方式是不同的。结果通常不尽人意，会产生内容的错位，移动，或者会丢失设计元素，更改布局，并且移动了位置。
How do you know it's the browser and not your design causing the problem?  You often don't.  If you play with CSS a lot, you will learn to recognize the symptoms.  In general, here are the clues:


你怎么知道是浏览器而不是你的设计，产生了问题？通常你不知道。如果你使用CSS有一段时间了，你就会了解一些征兆了。通常，有两个线索：
你怎么知道是浏览器而不是你的设计，产生了问题？通常你不知道。如果你使用CSS有一段时间了，你就会了解一些征兆了。通常，有两个线索：
* Text jumps around or blinks as you scroll down the page.


*当你下滚网页的时候，文本开始跳动或者抖动。
*当你下滚网页的时候，文本开始跳动或者抖动。
* Links and text jump around as you move the mouse over a link.


*当你将鼠标移向一个链接的时候，链接和文本开始跳动。
*当你将鼠标移向一个链接的时候，链接和文本开始跳动。
* Lists with links jump around and move as you move your mouse over them.


*当你将鼠标移向链接列表的时候，链接列表会跳动。
*当你将鼠标移向链接列表的时候，链接列表会跳动。
* Layouts look different. Columns are wider or narrower between browsers.


*布局看起来不同。浏览器之间的栏会更宽或者更窄。
*布局看起来不同。浏览器之间的栏会更宽或者更窄。
* Graphics overlap the text or lists.


*图形覆盖了文本或者列表。
*图形覆盖了文本或者列表。
* Special effects such as filters don't look the same or aren't there.


*特别的效果，例如filters看起来不是一样的或者根本就没有。
*特别的效果，例如filters看起来不是一样的或者根本就没有。
To get help with your browser bugs, check out the recommendations and resources at [[WordPress:CSS Fixing Browser Bugs]].


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

2008年7月4日 (五) 16:36的最新版本

在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 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的一些最常见的问题。

拼写错误：众所周知，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解决浏览器程序缺陷中的建议和资源。

取自“https://www.zzbaike.com/wiki/index.php?title=WordPress:CSS_Troubleshooting&oldid=5213”