优秀的CSS调试技术 [英] Excellent CSS debugging technique

问题描述

我在Eric Meyers on CSS中找到了一项出色的技巧。我以为

你们中的一些人可能会感兴趣。


技术是使用调试样式可以快速查看页面的布局

。例如，如果您正在尝试查看

基于表格的HTML表单的布局（转换为CSS，cource;）），您可以

添加风格：


表{border：2px solid blue;}


我也用这种方法找出浏览器放置的位置

DIV'和SPAN'。总的来说，我认为这是个好主意。

其他人经常使用它吗？

解决方案

Trent写道：

我在Eric Meyers on CSS中找到了一项出色的技巧。我认为你们中的一些人可能会感兴趣。

该技术是使用调试。样式可以快速查看页面的布局。例如，如果您正在尝试查看基于表格的HTML表单的布局（转换为CSS，cource;）），您可以添加样式：

table {border：2px solid blue;}

我也用这种方法来找出浏览器放置我的
DIV和SPAN的位置。总的来说，我认为这是个好主意。是否有其他人定期使用它？

好​​吧，Mozilla有DOM检查器，它突出显示带有红色

边框的节点。

Opera 7有很好的调试样式表，请尝试

查看 - >样式 - >用户模式 ​​- >显示结构元素/带轮廓的调试

-


Martin Honnen
http://javaScript.FAQTs.com/

" Trent" < SP ******* @ marx7.org>在消息中写道

news：22 ************************** @ posting.google.c om ...

我在Eric Meyers on CSS中找到了一项出色的技术。我认为你们中的一些人可能会感兴趣。

该技术是使用调试。样式...
.... table {border：2px solid blue;}

...还有其他人定期使用它吗？

只有当我遇到

布局的问题时（即每隔一天）。


-

Andrew Thompson

* http://www.PhySci.org/ PhySci软件套件

* http：//www.1point1C .org / 1.1C - Superluminal！

* http://www.AThompson.info/andrew/ 个人网站

Trent写道：

我发现了一个很好的技术Eric Meyers on CSS我认为你们中的一些人可能会感兴趣。

该技术是使用调试。样式可以快速查看页面的布局。例如，如果您正在尝试查看基于表格的HTML表单的布局（转换为CSS，cource;）），您可以添加样式：

table {border：2px solid blue;}

我也用这种方法来找出浏览器放置我的
DIV和SPAN的位置。总的来说，我认为这是个好主意。是否有其他人经常使用它？

是的。至少有两种不同的方式：


1.在开发过程中将类似的额外功能添加到CSS中。 （我使用

边框和背景颜色）。如果你把它们挡在一起，

你可以将它们评论出来。当它们没问题时，将它们留在那里以便于以后再打开。


2.使用可添加到的Web Developer的工具栏Mozilla Firebird。它$ / b $ b内置了一个*大*的这类调试功能，你可以打开

并关闭任何页面。它非常窥淫癖。能够一目了然

什么表&标题等，*其他人的*网站正在使用！ （其他

浏览器有这样的工具，但这是我找到的最好的工具。）
http://texturizer.net/firebird/extensions/#webdeveloper

我仍​​然经常使用IE浏览网页使用本地CSS（使用

" accessibility"菜单设置），虽然我使用：

table {border：1px dotted blue; }

它告诉我网上有多少布局表格！


-

Barry Pearson http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
< a rel =nofollowhref =http://www.ChildSupportAnalysis.co.uk/target =_ blank> http://www.ChildSupportAnalysis.co.uk/

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV''s and SPAN''s. Overall, I thought it was a great idea. Does
anyone else us it regularly?

解决方案

Trent wrote:

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV''s and SPAN''s. Overall, I thought it was a great idea. Does
anyone else us it regularly?

Well, Mozilla has the DOM inspector which highlights nodes with a red
border.
And Opera 7 has nice debugging style sheets, try
View->Style->User Mode->Show structural elements/debug with outline
--

Martin Honnen
http://JavaScript.FAQTs.com/

"Trent" <sp*******@marx7.org> wrote in message
news:22**************************@posting.google.c om...

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles ... .... table { border : 2px solid blue;}

...Does anyone else us it regularly?

Only when I am having a problem with a
layout (i.e. every other day).

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

Trent wrote:

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV''s and SPAN''s. Overall, I thought it was a great idea. Does
anyone else us it regularly?

Yes. There are at least 2 different ways:

1. Put extra features like that into the CSSs while you are developing. (I use
both border & background-color for that). If you keep them blocked together,
you can "comment them out" when they are OK, leaving them there for easy
switch-on later.

2. Use the Web Developer''s toolbar that you can add to Mozilla Firebird. It
has a *large* array of such debugging features built in that you can switch on
and off for any pages. It is very "voyeuristic" being able to see at a glance
what tables & headers, etc, *someone else''s* web site is using! (Other
browsers have such tools, but this is the best I''ve found).
http://texturizer.net/firebird/extensions/#webdeveloper

I still often browse the web using IE with a local CSS (set with the
"accessibility" menu), although I use:
table { border: 1px dotted blue; }
It tells me just how many layout-tables exist across the web!

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

这篇关于优秀的CSS调试技术的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！