层叠样式表/兼容性

每次更改布局样式任务时，至少在四个浏览器引擎（Gecko、Webkit、Trident、Presto）中进行测试，以避免在“结束”时进行大量的调试工作。

仅对可能出现在单个页面多个部分的元素集合使用类，否则只需使用其容器的 ID 引用该集合。

验证 HTML 和 CSS 代码，以确保标记不会破坏布局，并且样式规则不包含任何语法错误。

如果元素之间存在神秘的空白，请确保已重置边距和填充。

如果布局神秘地损坏，请确保锚标记和嵌套的图像或跨度之间没有换行符或空白。

使用基于浏览器的盒子模型工具（例如：Chrome 的Web Developer Toolbar、Firefox 的Firebug、Opera Dragonfly或IE Developer Toolbar）确保每个元素的四个角都可见，以识别与溢出相关的问题。如果宽度过大且右侧边框丢失，则减小元素的固定宽度。如果高度过大且底部边框丢失，如果内容未被截断，则关闭溢出，否则减小高度或重新定位任何使用绝对定位、相对定位或负边距遮挡内容的相邻元素。

在 IE Developer Toolbar 中使用应用样式上下文菜单查看级联中的哪些规则覆盖了您想要的规则。

确保用于提高特异性的父元素在所有模板中都可用。

对于验证器无法在 URL 上工作的页面，复制粘贴生成的源代码到 HTML 验证器中。

确保任何子元素的填充不会强制容器扩展到其定义的尺寸之外，并且如果无法避免在同一元素上同时设置填充和宽度或高度，则相应地减小尺寸。

确保在浏览器 Chrome 中有和没有工具栏的情况下测试布局，以确保添加或删除浏览器菜单不会触发任何最小高度错误。

确保您定义的样式不会被具有更高特异性的现有样式或 CSS 代码中稍后定义的样式覆盖，方法是使用对父类或 ID 的引用来增加选择器权重。

确保使用Firebug或Web Inspector（CTRL + Shift + C）验证本地 CSS 规则的微重置，并在必要时增加选择器权重以覆盖可能无意中导致神秘布局问题的级联。

在对通用样式执行此操作时，确保增加 IE 特定 CSS 规则的选择器权重。

确保容器的宽度和高度尺寸留有足够的空间来提供 CSS 代码中声明的垂直或水平位置。

确保所有浮动元素的宽度和高度尺寸都适合容器的约束。

确保右对齐内容（如标签副本）的宽度仅根据需要设置，以避免使用左边距或填充进行对齐，因为这在不同浏览器中可能不一致。

确保具有换行内容的浮动元素具有定义的宽度和正确的文本对齐方式。

确保任何在 :hover 上扩展的容器都具有一个默认宽度和高度，该宽度和高度大于或等于任何嵌套元素的大小。

确保固定宽度容器使用 overflow:hidden，以便收缩包装的嵌套块不会在旧版 Firefox 中导致边距折叠。

确保所有内联元素都绝对定位或包含在块级元素中。

更改容器的位置属性，以确保它允许嵌套元素的绝对或相对放置。

创建模板的副本，并删除除未对齐的 div 及其相邻 div 之外的所有 div，以调试定位问题。

在不响应 display:inline 或 display:inline-block 声明的块级元素周围放置一个容器 div。

在调试绝对定位的 div 中被忽略的定位值时，从内部 div 中删除边距。

删除所有内联文本，并以不换行空格作为占位符内容，以调试宽度和高度问题。

将边距、填充、字体大小和边框大小设置为零，以调试未见的继承问题。

如果边距在内联文本中不一致（例如使用标记创建标题，并使用一个像素高的元素和边距偏移量创建圆角），请使用 display:block 和固定高度。

对于 IE6 和 IE7，请为每一行使用唯一的固定宽度，而不是使用边距偏移量在内联块容器内创建圆角。

为每一行使用唯一的 background-position，以使用覆盖容器一半但不覆盖另一半的背景图像创建圆角。

当绝对定位的元素或边距与其他浏览器不一致时，使用 IE 特定样式。

当绝对定位的元素未出现在 IE 中正确相对定位的父元素内时，使用固定宽度容器。

如果具有 position:absolute 或 relative 的内容在 IE 中滚动时表现得像 position:fixed，请在具有 overflow:scroll 或 auto 的容器上使用 position:relative。

在调试内部 div 时，使用明显的背景颜色突出显示放置错误或未对齐的嵌套元素。

使用内联样式并删除 ID 和类引用以显示由于未知 CSS 错误而不可见的元素。

使用 word-wrap:break-word（CSS3 属性）或 wbr（及其替代方案）在长单词内换行，以防止不可分割字符串的溢出导致水平滚动条或块无意中换行。

在 IE5 集中使用表格特定的字体规则，因为应用于 html 和 body 标记的规则不会级联到表格元素。

当边距不起作用时，使用 div 而不是段落。

使用 div 而不是段落，以避免段落之间继承的垂直边距。

在绝对定位的元素上使用 display:inline 以避免 hasLayout 问题。

使用边距移动绝对定位的元素，而不是使用方向偏移。

使用 border-collapse: collapse; 和 border-spacing:0 删除表格列之间的间隙。

在执行上述操作后，在 td 元素而不是 tr 元素上使用边框样式，以在表格上创建网格线。

使用 empty-cells: hide 删除空表格单元格的边框。

在内联文本上使用 position:relative，在块级容器和媒体上使用 position:absolute。

使用 inline-block 为相对定位的容器提供 hasLayout。

确保类选择器不会被 ID 选择器的默认值无意中覆盖，尤其是精灵的 background-position 更改，方法是使用长手写法划分 ID 选择器的属性。

在 IE 中使用 vertical-align middle 对齐内联块元素；对表单元素使用 vertical-align:top。

如果负边距未显示溢出内容，请在父元素上使用 overflow:visible。

创建更多具有特定名称的类，而不是创建更复杂的父=>子引用。

确保没有更具体的 CSS 规则或样式表中稍后出现的规则覆盖所需的效果。

确保被忽略的类或 ID 名称开头没有数字。

IE 仅在锚标记上发生更改时才会更改悬停子元素的状态，因此如果 a:hover span { display:block; } 不起作用，请使用冗余效果，例如 a:hover{ visibility:visible; }。

如果使用父类或 id 引用悬停子元素，则 IE 仅在锚标记上设置了在该锚的任何其他伪类中未声明的属性时才会更改其状态，例如 text indent:0、float:none、direction:inherit、visibility:inherit、white-space:normal 等。例如 .class a:hover span{} 需要 .class a:hover{visibility:inherit;}。

IE 会增加具有斜体字体样式的容器的宽度，因此如果可能，请使用 overflow:hidden 以避免不一致的换行。

如果页面上的链接仅在 IE 中可点击，请查找与链接重叠的绝对定位元素，并提高链接容器的 z-index 值或重新定位布局，以避免重叠发生。

如果一组元素的属性值不起作用，请重新定义其中一个元素的该属性值，以查看是否缺少逗号或不支持的选择器使整个规则无效。

#business_photo, .sentence, .instruction, .list > li { padding-bottom: 24px; }

/* Redefine the same padding value because the descendant selector nullifies the above line in IE6 */
#business_photo { padding-bottom: 24px; }

如果事件或悬停触发子菜单或其他隐藏内容的显示时，相邻元素被神秘地重新定位，请确保该内容未在外部 CSS、内联 CSS 或生成的 JavaScript 属性中相对定位。

如果由于特殊情况（例如长列表中的滚动条或第一个或最后一个列表的不同边距）导致一系列带有标题的列表之间的边距不一致，请从列表本身中删除边距，并将它们放在标题上，并在容器的顶部和底部使用填充来处理第一个或最后一个列表和边框之间的间距。

如果元素周围的边框没有显示，请将颜色设置为黑色或白色，以查看颜色是否太浅或太深而无法与背景区分。

如果一个 div 被推到其指定位置下方的新行，请使用鼠标选择 div 内的内容，以查看其中的块元素的尺寸是否导致容器外部溢出。除了验证 HTML 以确保没有缺少块标记或内联标记嵌套在块标记内之外，还要确保设置容器内任何表单的宽度。

如果超链接的悬停或已访问状态无法正常工作，请执行以下检查：-确保伪类以正确的顺序定义-确保伪类不与不太具体的元素共享相同的定义，例如 a:hover{color: #ccc;} 和 .mylink:hover{color: #ccc;}，因为浏览器会将它们组合在一起并在级联中解析不太具体的规则，然后再解析更具体的规则，例如 .mysite{color: #eee;}。如果是这种情况，请在伪类规则中添加对父容器的引用，例如 .mymenu .mylink:hover{color: #ccc;} 以增加选择器权重。-确保伪类是在元素选择器而不是类选择器中定义的，例如 .nav a:hover 与 nav a.submenu:hover。这在 IE6 中可能不起作用。-确保规则以正确的顺序定义，顺序如下：1. :link, :visited 2. :hover, :focus 3. :active

由于链接可以同时处于 :visited、:hover 和 :active 状态，并且它们具有相同特异性，因此最后一个列出的状态获胜。

增加或减少容器内的文本，以确保它正确地换行和调整大小。

增加或减少浏览器字体大小几次，以查看它如何影响您的背景和边距，尤其是在标题和导航中使用的文本。

将类应用于不同的元素，以确保每个类不依赖于特定标记。

在一个 div 内包含几个块级元素，例如一些段落和一个大的列表，以查看它是否破坏了容器的流。

如果浮动元素在 IE6 或 IE7 中不可见，请为其设置 position:relative。

如果断词导致任何具有相对尺寸的嵌套容器扩展，请为数据表格单元格设置固定宽度或高度。如果在任何表格单元格内都有一个宽度为百分比的 div 容器，并且另一个单元格中的内容强制断词，则如果未在单元格上设置显式宽度或高度来包含内容，则 div 的相对宽度将在 IE6 和 IE7 中增长以匹配表格单元格的溢出宽度。

如果某个元素在 IE 中拉伸到超出其定义高度，请重置其行高。

使用 clear 将元素从浮动兄弟元素中分离出来并将其换行。

通过开发容器样式的命名约定和组织，将 HTML 结构和 CSS 设计分开，而无需考虑内容。

创建一个可重用的标题、页脚、子菜单、导航栏、列表、表单和网格布局库。

为类和 ID 使用一致的语义样式名称。

设计模块使其内部透明。

通过将多个类应用于元素来扩展对象。

在所有项目中使用 CSS 重置样式、网络安全字体和网格。

避免使用在级联之外会失效的位置相关的样式。

避免使用描述其映射到的标签或属性的类名，例如 .hidediv 或 .floatleft。

避免使用 ID 来设置主要布局容器内内容的样式。

避免使用图像替换文本。

避免在不规则背景上使用阴影和圆角。

避免将 div 嵌套在 span 内或将 span 与 div 相邻，以防止触发由匿名块框的行为引起的副作用。

在 IE6 中使用 1px 点状边框存在错误，并且会显示虚线边框。使用 IE6 特定的 2px border-width 样式和所需颜色的较浅色调来抵消较大的像素尺寸。

对于表单元素，除了顶部或底部之外的任何 vertical-align 值在不同浏览器中的呈现效果都会不一致。

仅当 HTML 标记不可编辑时，才使用 !important 声明创建用户样式表或覆盖内联样式。!important 声明必须跟随它打算赋予权重的属性的值。由于可以将内联样式添加到任何 HTML 标签，因此如果未为元素定义 class 或 ID 属性，则使用 style 属性选择器是覆盖这些样式的唯一方法，如下例所示。

div[style]{ background-color: #f00 !important; }

在使用 abs pos 元素时，在 HTML 源代码顺序中将其作为 rel pos 容器的最后一个子元素，以用于 IE6。

在 href 内嵌套一个 abs pos span 以创建出现在不同位置的下拉菜单。

使用嵌套 span 技巧通过将其背景颜色设置为所需的导航背景并在悬停时使其可见来突出显示导航列表的父容器。使 ul 成为 rel pos 父元素并为其设置 overflow hidden，并将空 span 设置为 bottom:0; z-index:-1; height: 99em; 以及与导航栏相等的宽度。

 <ul id="nav"><li><a href="#"><span></span>Test 1</a></li></ul>

使用嵌套 span 技巧通过偏移其背景定位并将其放置在所需内容之上来创建多边形形状的链接。

使用 a:focus{width:0,height:0,outline:0} 删除点状边框。

使用 abs/rel 定位在 IE6/7 中模拟轮廓。

使用重置来调试边距/填充问题。

如果间距不正确，请使用边距移除填充和 abs 定位元素的顶部/底部定位。

使用 :default 选择所有单选按钮集。

在 IE6 中使用 :active 作为 :focus。

确保用于特异性的父 div 在所有模板中都可用。

使用具有背景颜色的相对/绝对 div 使用以下步骤用省略号替换文本。

创建一个内容 div，其中包含原始内容，其高度等于字体大小 * 您希望可见的行数。

当触发 JavaScript 事件时，通过添加具有该设置的类将高度减少到您希望可见的新行数。

通过将 ID 选择器的属性划分为多个部分，确保类选择器不会被 ID 选择器的默认值意外覆盖，尤其是精灵的 background-position 更改。

在 IE 中使用 vertical-align middle 对齐内联块元素；对表单元素使用 vertical-align:top。

使用 change 事件委托输入和选择元素。

使用活动链接状态和相对定位来响应链接点击。

使用以下替代方案来缓冲屏幕外内容：- 使用负边距代替 display:none - 使用相对定位偏移代替文本的 visibility:hidden - 使用 background-position 代替图像的 visibility:hidden - 使用 display:inline block 代替 display:table - 使用 clip:rect 代替 max-width/height。

在 Firefox 2 中，绝对定位的元素移动到其相对定位的父元素之外会导致容器拉伸。

对最外层元素使用边距。

对具有背景颜色或图像的元素使用填充。

-moz-only-whitespace 匹配一个根本没有子节点或空文本节点或仅包含空格的文本节点的元素。只有当元素内有元素节点或包含一个或多个字符的文本节点时，元素才不再匹配此伪类。

-moz-selection (::selection) 伪元素应用于用户已突出显示（例如，使用鼠标选择）的文档部分。

:-moz-first-node 伪类匹配某个其他元素的第一个子节点的元素。它与 :first-child 不同，因为它不匹配在其前面有（非空格）文本的第一个子元素。

:-moz-last-node 伪类匹配某个其他元素的最后一个子节点的元素。它与 :last-child 不同，因为它不匹配在其后面有（非空格）文本的最后一个子元素。

::-moz-list-bullet 伪类用于编辑列表元素的项目符号。

:default 伪类用于识别在一组类似元素中为默认的用户界面元素。

使用 -ms-text-align-last 处理段落末尾的孤行。

使用 xsl:number 模仿 IE 中计数器的生成内容。

使用轮廓为带有白色装饰的按钮设置样式。

使用 q { quotes: '"' '"' } 定义引号字符。

使用以下方法触发引号字符显示。

q:before { content: open-quote }
q:after  { content: close-quote }

使用固定定位和 @media print 在每一页上显示标题和页脚容器。

使用绝对定位代替固定定位，以避免在每一页上显示标题和页脚容器。