IE8开发者工具调试（二）CSS篇

IE开发者工具调试（一）CSS篇

IE开发者工具控制台有两个地方可以查看和编辑CSS
第一个 HTML面板右侧
第二个 CSS面板

一、HTML面板右侧功能介绍

样式

说明： 显示CSS规则、属性和值是如何应用到所选元素上的。可以对规则最左一列的复选框进行勾选或清除来查看CSS规则如何影响页面元素的显示。
面板截屏：
自上而下为 继承CSS、内联样式和外联样式、行内样式排列。具体的属性值按照书写先后顺序排序。可以修改CSS属性名和属性值。

修改属性名

鼠标在属性名上单击，即可编辑属性名，回车和鼠标单击其他地方就编辑成功。

删除属性名

属性名编辑为空字符串，回车或者单击其他地方就会删除该属性

修改属性值

鼠标在属性名上单击，即可编辑属性值，回车和鼠标单击其他地方就编辑成功。如果把属性值修改为空字符串，就不能编辑该属性值了

跟踪样式

说明： 跟踪样式视图显示的信息与样式视图相同，但是它是以属性而不是元素进行分组。
面板截屏：
自上而下按照在该元素上生效的CSS属性值字母A-Z顺序排序，（含继承自父元素的CSS属性）。展开属性值后，可以查看该属性值的来源，按照优先级自低到高排列。如果css选择器和查看的标签名匹配不上，则表示该属性为继承自父元素。

修改属性值

鼠标在属性名上单击，即可编辑属性值，回车和鼠标单击其他地方就编辑成功。如果把属性值修改为空字符串，就不能编辑该属性值了

布局

说明： 布局视图显示了元素框模型属性。该视图显示了元素与周围元素的一个关系。
面板截屏：
类似于谷歌浏览器的Computed面板，但是只计算了margin border padding content-box offet z-index等属性，其他属性未计算。

修改属性值

在对应的数字上单击，即可编辑属性值，回车和鼠标单击其他地方就编辑成功，为行内样式。如果改的值不符合格式，则为默认值0。更改content-box的width和height，offset值不会生效，坐标值不能更改。

属性

说明： 属性视图显示所有当前所选元素的属性和值。
面板截屏：

删除属性

鼠标选中要删除的属性，然后点击删除属性按钮即可

修改属性名

鼠标移至 “属性名” 上单击，属性名变为可编辑状态。鼠标单击至 其他地方 或者 回车，即可保存修改结果。（比较简单，不在截图了）

修改属性值

鼠标移至 “属性值” 上单击，属性值变为可编辑状态，鼠标单击至 其他地方 或者 回车，即可保存修改结果。（比较简单，不在截图了）

增加属性

方法一：单击+号
方法二：单击第一个空白行

注：
属性名点击右侧箭头，会下拉显示系统支持的属性名，可以在下拉菜单中选择属性名，也可以手动输入不在列表中的属性名

如果最后修改或者增加的属性名，不为css样式的属性名，与HTML面板右键==>增加属性是一样的功能

如果最后修改或者增加的属性名，为css样式的属性名（属性名后面会有 (css) 文字），为增加行内样式

二、CSS面板功能介绍

1、查看css样式文件
2、修改增删改css属性（见css篇）
选择要查看的css文件，即可在面板中查看文件对应的css样式。取消规则或者属性前的复选框，可以让该样式不生效，也可以编辑规则和属性

增加规则、删除规则、增加属性、删除属性

操作方法： 在CSS面板中，在规则名上鼠标右键，可以出现如下图所示的菜单。选择对应的功能，编辑属性或者规则即可。如果在属性上鼠标右键，有关规则的菜单不会显示。编辑方法与其他的一样，在此不再赘述。

IE8开发者工具调试（一）JAVASCRIPT篇 正在编写中。。。。。。

IE8按下F12打开不了控制台的问题https://www.cnblogs.com/westward/p/5740859.html
IE开发者工具使用方法