Document! X和HelpStudio使用技巧：如何诊断CSS问题

诊断和识别CSS问题的最简单，最有效的方法之一是使用Internet Explorer开发人员工具（IE8或更高版本），Mozilla Firefox浏览器开发人员工具或Google Chrome中内置的开发人员工具。这些工具使您可以详细检查生成的HTML，并确定哪些样式规则有助于页面给定部分的布局和样式。

诊断和识别CSS问题的最简单，最有效的方法之一是使用Internet Explorer开发人员工具（IE8或更高版本），Mozilla Firefox浏览器开发人员工具或Google Chrome中内置的开发人员工具。这些工具使您可以详细检查生成的HTML，并确定哪些样式规则有助于页面给定部分的布局和样式。

可以在这里找到有关各种浏览器工具的更多信息：

• Chrome浏览器：https：//developers.google.com/chrome-developer-tools/

• Firefox：https：  //developer.mozilla.org/en-US/docs/Tools

• Edge：https：//docs.microsoft.com/zh-cn/microsoft-edge/devtools-guide

• Internet Explorer：http：//msdn.microsoft.com/en-us/library/gg699337（v = vs.85）.aspx

• Opera：https：  //help.opera.com/en/presto/advanced-features/#dragonfly

• Safari：https：//developer.apple.com/technologies/safari/developer-tools.html

在Google Chrome中使用开发者工具

构建您要检查的输出。构建完成后，在Chrome中打开浏览器帮助输出。

注意：如果Chrome不是您的默认浏览器，请从默认打开的浏览器中的地址栏中复制地址，打开Chrome，然后将该地址粘贴到Chrome地址栏中。

• 在目录中，导航至您要检查CSS或HTML的主题。

• 按（F12）或（Ctrl + Shift + I）打开开发人员工具。

• 开发人员工具窗格顶部的按钮条使您可以检查页面的各个方面。

• 单击Elements（元素）选项卡以显示元素层次结构。

• 单击Developer Tools pane（开发人员工具）窗格的Elements（元素）选项卡旁边带上的arrow pointing the square（箭头指向正方形）图标-这将激活检查模式。

• 将鼠标移到页面上，然后单击您想要更仔细地查看的元素。

• 现在，Developer Tools pane（开发人员工具）将在开发人员工具窗格的右下角显示正在应用于该元素的各种样式规则（下面的示例）

提示：您可以在Google Developer Tools主页上找到有关使用Google Chrome Developer Tools的更多信息。

在Mozilla Firefox中使用开发人员工具

构建您要检查的输出。构建完成后，在Firefox中打开纯HTML输出。

注意：如果Firefox不是您的默认浏览器，请从默认打开的浏览器中的地址栏中复制地址，打开Firefox并将该地址粘贴到Firefox地址栏中。

• 在目录中，导航至您要检查CSS或HTML的主题。

• 按（F12）或使用Tools（工具）菜单选择Web developer（Web开发人员）>Toggle Tools（切换工具）。

• 单击Inspector（检查器）选项卡以显示元素层次结构。

• 单击Developer Tools pane（开发人员工具）窗格的Inspector（检查器）选项卡旁边条上的arrow pointing the square（箭头指向正方形）图标-这将激活检查模式。

• 将鼠标移到页面上，然后单击您想要更仔细地查看的元素。

• 现在，Developer Tools pane（开发人员工具）将在开发人员工具窗格的右下角显示正在应用于该元素的各种样式规则（下面的示例）

注意：您可以在Firefox开发人员工具主页上找到有关使用Firefox开发人员工具的更多信息。

在Microsoft Edge中使用开发人员工具

构建您要检查的输出。 生成后，在Internet Explorer中打开纯HTML输出。

注意：如果Microsoft /Edge不是您的默认浏览器，请从默认打开的浏览器中的地址栏中复制地址，打开Edge并将该地址粘贴到Edge地址栏中。

• 在目录中，导航至您要检查CSS或HTML的主题。

• 按（F12）打开Developer Tools pane（开发人员工具）窗口。

• 单击Inspector（检查器）选项卡以显示元素层次结构。

• 单击arrow pointing the square（箭头指向正方形）图标按钮以启动检查模式。

• 单击要检查的元素。

• 开发者工具将突出显示您在元素层次结构中单击的元素，并在右侧显示对该元素有效的样式规则（以下示例）。

注意：您可以在Microsoft Edge（EdgeHTML）开发人员工具页面上找到有关使用Microsoft Edge开发人员工具的更多信息。

在Internet Explorer中使用开发人员工具

构建您要检查的输出。生成后，在Internet Explorer中打开纯HTML输出。

注意：如果IE不是您的默认浏览器，请从默认打开的浏览器中的地址栏中复制地址，打开IE，然后将该地址粘贴到IE地址栏中。
操作步骤与在Microsoft Edge中使用开发人员工具一致。

示例如下：

如果您对上面的问题有什么疑惑或者建议都可以在评论区留言，大家一起讨论。

如果您对Document! X和HelpStudio感兴趣，可以咨询在线客服购买正版授权软件。

标签：