WordPress:CSS Troubleshooting

来自站长百科
Xxf3325（讨论 | 贡献）2008年7月4日 (五) 11:13的版本
跳转至： 导航、​ 搜索

在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

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（分开）区： 

<div id="header">Title of the Page</div>
In the style sheet (CSS) the ID selector is referenced as #header and might look like this:
#header { position: relative; margin:0; padding:0;
	height:100px; width: 100%; background: red;
	color: white;}
<div id="header">网页标题</div>
在样式表中(CSS) the ID 选择器被引用为#标头 而且可能看起来像:
#header { position: relative; margin:0; padding:0;
	height:100px; width: 100%; background: red;
	color: white;}


#header { position: relative; margin:0; padding:0;
	height:100px; width: 100%; background: red;
	color: white;}


The 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选择器： 

.hilite { color: red}
and the reference in your HTML might look like this:
...this is some text about something
I want <span class="hilite">in red</span>. And 
some more rambling here...


.hilite { 颜色: 红色}

你的HTML 中的reference可能看起来像:
...这个文本是关于我想要的某个东西<span class="hilite">in red</span>. And 
some more rambling here...
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可以在同一个网页上多次使用。

HTMLTags

HTML标签

If you want to "design" a specific HTML tag reference, such as a blockquote, the code within the web page may look like this:

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

<blockquote>This is a pithy and brilliant quote 
that I knew you would enjoy.</blockquote>


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


In the style sheet, the reference to the blockquote 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.

；在样式表中，blockquote的reference没有#或者点号，但是会列出HTML和设计元素。这个例子中，引用的两边都缩进了而且引用的左边有一个蓝行，同时引用文本也是斜体的。 

blockquote { position: relative; margin: 10px 50px 10px 50px;
	padding:5px;  font-style:italic; 
	border-left:solid blue 4px; }


blockquote { position: relative; margin: 10px 50px 10px 50px;
	padding:5px;  font-style:italic; 
	border-left:solid blue 4px; }


You can apply any design elements to any specific HTML tag such as body, p, H1, H2, H3, ul, li, and more.

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

For information on modifying ID, CLASS, and HTML, check out the resources at WordPress' CSS Tips, Techniques and Resources.

关于更改ID, CLASS, 和HTML的信息，请查看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样式表。

Examine Your HTML and 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。窄看一眼，这些编码就如汽车的引擎盖下面的东西。你知道正是引擎盖下面的东西，使得汽车能够开起来，但是那些乱起八糟的编码到底是什么呢？

Viewing 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网页，这个网页支持了你的网页的结构。


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，双击文件名或者在你的网络浏览器文件上输入特别的链接，如：

http://www.yoursite.com/wordpress/wp-content/themes/default/style.css

http://www.yoursite.com/wordpress/wp-content/themes/default/style.css

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. 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文件。关于使用主题的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来影响网页的布局。要真正地改变主题，请查看主题发展。

Looking Under the Hood for 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，就要开始玩侦查的游戏了。开始，你要知道你在查看什么，以及可以在哪儿找到基本的元素，帮助你找到问题所在。

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文件中的一些方向。


Scroll down past a lot of <link rel='archives'... information until you see <body>. 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.

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

As you scroll through it, look for identifying ID and CLASS statements. For example, you may see the following:

继续向下滚动，查看识别的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">



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



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 #page selector, you will see the presentation styles associated with it. It is followed by the header division which includes a heading (H1) with the title of your site. This particular layout is based upon the default Theme for WordPress v1.5 called Kubrick which includes an image in the header, set by the "headerimg" division. After that comes a division with a CLASS reference called "description" which is the place you have a subtitle or description of your site. Again, look in your CSS to find .description to find out how that area is styled.

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


The next two tags close the header () and then begins the division ID of "content" which also features a CLASS called "widecolumn", followed by another CLASS called "post". The "content" and "widecolumn" layout the overall look of the containers holding your "post". 接着的两个标签关闭了标题 ()，然后是"内容"部分ID，也有一个CLASS，称为"widecolumn"，紧跟着另一个CLASS，称为"文章"。"内容" 和 "widecolumn"布局了持有你的r "文章"那个部分。

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布局问题的主要部分之一。

The CSS Parent and Child Relationship

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的"母/子关系"。众所周知，父母的内心通常知道孩子们最真实的想法，孩子们通常惧怕父母们的这种想法，也会为此苦恼，因此，了解这样关系，会帮助你解决这个问题。

A WordPress user posted a question on the forum complaining that she wanted her page to feature her header 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 header to no avail and turned to us for help.

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

<div id="page">
	<div id="header">Header Title</div>
 <div id="content">
  		<div class="post">Post babble here...</div>
<div id="page">
	<div id="标头">标头标题</div>
 <div id="内容">
  		<div class="post">Post babble here...</div>

The CSS attributes for the margins in this example are:

这个例子中，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; }


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


Playing detective with her codes, we found that changing the margins on the header weren't working because they were being influenced by the page margins to begin with. This is where the parent/child relationship shows up. The parent page was telling the child header what to do and it wanted to do something else.

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

If we changed the right and left margins of page, it eliminated the margin problems for the header. But we've created another problem. The parent page 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 content so the wide margins are back in place. To make the whole family happy, the new margins looked like this:

如果我们更改了页面左边和右边的空白，便解决了标头的问题，但是我们又由此产生了另一个问题。母网页的影响继续存在，现在所有的内容都扩展在整个网页上。要更改内容左边和右边的空白，这样又有很宽的页面空白了。要使得整个页面看起来合适，新的页面空白看起来像： 

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


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


Isolate Your 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都做了备份，以确定当处理不当的时候，你还能够返回到原文件。

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文件，并且给不同的部分，添加以下的属性： 

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: 例如： 

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


#网页{ 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; }

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:

This is a section of rambling text that goes on and on.

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

This is another section that has been highlighted in a red box.

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

This is the rest of the text back to normal.

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

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中得到了识别。

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/. A demo is available for test drives.

如果你使用Firefox作为浏览器，有一个便利的插件能够帮助你解决问题，使得解决css问题变得非常简单。这个插件称为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. 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!

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

In the CSS file, you can change a section's font color by adding color:red or any other color to the selector's attributes such as:

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

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 red and would look like this:

H1标题呈现给你的是明亮的红色而且看起来像：

To change the background color of a section, you can add background:pink to make the entire background pink.

要更改某个部分的背景色，你可以添加背景色:粉红色，使得整个背景呈现粉红色。 

#header { margin:5px; padding: 10px; background:pink; }
  1. 标头 { margin:5px; padding: 10px; background:pink; }

The result might look like this:

结果可能看起来像：

This is some text that goes on babbling here and there.
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.

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

This is the rest of the text back to normal.
这是正常颜色的文本。

The entire header division will now feature a pink 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.

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

Validate Your Source Code

确认源代码

Sometimes the smallest detail can send your page out of whack. A mispelled tag (rhef instead of href), a forgotten closing tag, a missing attribute, or even the wrong attribute can send your page into a design tail spin.

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

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会确认默认的代码，但是如果你做了更改，一点小小的改动，都会使得网页变得一团糟。

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甚至会推荐做一些其它的更改，但是先找到你的问题所在，再做更改。

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.

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

Slash and Burn - The Last Resort

Slash and Burn - The Last Resort

Not for the timid

不适用于胆小的人

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|第二个]]。

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。

1. Make backups of all of your files. 1.备份所有的文件。 2. Open a post in the web browser and VIEW > SOURCE. 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"，保存到你的硬盘中的一个空的测试文件夹中。不要关闭这个文件。在这个过程中，这个文件都是打开的。 4. Copy your CSS file to the same test folder. 4.将你的CSS文件复制到同一个测试文件夹中。 5. If you are having problems with the graphics, copy the graphics folder or the graphics to the test folder.

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源文件中，将类似：

<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. In the test folder, double click on junk.html 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.在测试文件夹中，双击junk.html浏览你的浏览器中的文件。如果合适的话，你会看到带有图形的整个页面的布局。如果不行的话，再次检查样式表的链接reference。

8. In your junk.html 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: 

<p>babble...</p>
or
<div class="post">babble...</div>
and highlight the entire section from the opening tag to the closing tag and CUT the section (Cntrl+X).

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

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

：并且从开始标签到结束标签，突出整个部分，并且剪贴这个部分(Cntrl+X)。

9. Save the file. 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)。

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.你会发现移除的部分，不见了。继续检查看看，问题是不是解决了，或者问题是不是除掉了。如果是的，那个移除部分就是问题所在，如果问题仍然存在，那么继续下面的步骤。

12. If the problem is still there, move back to the junk.html 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.如果问题仍然存在，返回到junk.html文件，如果指针已经移动了，将鼠标指针放到你删除某个部分的位置。粘贴返回剪贴的部分(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文件，解决问题。

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

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

Missed Spellings
Just so you know, leftt is not the same as left and this could be the reason something is on the right instead of the left side of your page. Putting a 30ps for a margin won't get much of a result, but 30px will. Missed spelling errors are common and easy to overlook. Luckily, CSS validators can often catch these tiny mistakes for us.

；拼写错误：众所周知，leftt与left不同，而且这可能导致某个内容本应该出现在网页的右边，最后却出现在了左边。在一个页面空白上放上一个30ps可能得不到什么结果，但是30px会起作用。拼写中遗漏字母的错误非常常见而且也很容易遭到忽视。幸运地是，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 selector { property: value; property: value; } 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标签。必须被设置为选择器{ property: value; property: value; }而且必须有括号，冒号和分号。缺少任何一样，什么结果都不会产生或者会出现奇怪的结果。CSS确认器经常会为你找到这些容易遗漏的详细信息。

Wrong Selector
Putting all your wonderful designs in #content when they were supposed to be in #context-text 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 #content. Of course, you can refer to your frequently backed-up file to get the lost code. Hint-Hint!

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

Wrong Template Module
As useful as WordPress' new modular templates are, many a time a user has made a modification in comments.php instead of comments-popup.php 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新的模块模板很有用，用户许多时候会更改comments.php 而不是comments-popup.php或者更改了其它名称类似的文件。仔细地检查，你应该一直处理的模块部分。如果你偶然地将每个模块搞糟了，可靠的文件备份，能够使得处理重新开始。

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 h1 heading, and nothing is changing, search through the style sheet to see if there is another reference to that selector.

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

Pest Control - Watching Out For Browser Bugs

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

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标准，然而新的浏览器与过去的浏览器"阅读"内容的方式是不同的。结果通常不尽人意，会产生内容的错位，移动，或者会丢失设计元素，更改布局，并且移动了位置。

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有一段时间了，你就会了解一些征兆了。通常，有两个线索：

  • 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看起来不是一样的或者根本就没有。

To get help with your browser bugs, check out the recommendations and resources at WordPress:CSS Fixing Browser Bugs.

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

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