层叠样式表/兼容性
每次修改时，至少在四个浏览器引擎（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 选择器的属性。
使用 vertical-align middle 在 IE 中对齐内联块元素；对于表单元素，使用 vertical-align:top。
如果负边距未显示溢出内容，则在父元素上使用 overflow:visible。
创建更多具有特定名称的类，而不是创建更复杂的父=>子引用。
确保没有更具体的 CSS 规则或样式表中稍后出现的规则覆盖所需的效果。
确保被忽略的类或 ID 名称的开头没有数字。
IE 仅在锚标记上发生更改时才会更改悬停子元素的状态，因此如果像 a:hover span { display:block; } 之类的内容不起作用，请使用冗余效果，例如 a:hover{ visibility:visible; }。
如果在锚标记上设置了在该锚的任何其他伪类中未声明的属性（例如 text indent:0、float:none、direction:inherit、visibility:inherit、white-space:normal 等），则 IE 仅会更改使用父类或 id 引用其悬停子元素的状态。例如 .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 中拉伸到超出其定义高度，请重置其 line-height
使用 clear 将元素从浮动同级元素分离并将其换行
通过开发容器样式的命名约定和组织，在不考虑内容的情况下，分离 HTML 结构和 CSS 设计
创建可重用的标题、页脚、子菜单、导航栏、列表、表单和网格布局库
对类和 ID 使用一致的语义样式名称
设计模块使其内部透明
通过将多个类应用于元素来扩展对象
在所有项目中使用 CSS 重置样式、网络安全字体和网格
避免使用在级联之外会中断的位置相关的样式
避免使用描述其映射到的标签或属性的类名，例如 .hidediv 或 .floatleft
避免使用 ID 来设置主要布局容器内内容的样式
避免使用图像替换文本
避免在不规则背景上使用阴影和圆角
避免将 div 嵌套在 span 内或将 span 与 div 相邻放置，以防止触发匿名块框行为引起的副作用
在 IE6 中使用 1px 点状边框存在错误，将显示虚线边框。使用 IE6 特定的 2px border-width 样式和所需颜色的较浅色调来抵消较大的像素尺寸。
对于表单元素，除了顶部或底部之外的任何 vertical-align 值在浏览器之间的呈现效果都不一致
仅当 HTML 标记不可编辑时，才使用 !important 声明创建用户样式表或覆盖内联样式。!important 声明必须跟在其打算赋予权重的属性的值之后。由于可以向任何 HTML 标签添加内联样式，因此如果未为元素定义类或 ID 属性，则使用 style 属性选择器是覆盖这些样式的唯一方法，例如以下示例
div[style]{ background-color: #f00 !important; }
在使用 abs pos 元素时，在 IE6 的 HTML 源代码顺序中，将它们设为 rel pos 容器的最后一个子元素
在 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，使用以下步骤用省略号替换文本
创建一个 content div，其中包含原始内容，其高度等于字体大小 * 您希望可见的行数
当触发 JavaScript 事件时，通过添加具有该设置的类，将高度减少到您希望可见的新行数
确保类选择器不会被 ID 选择器的默认值意外覆盖，尤其是精灵的 background-position 更改，方法是将 ID 选择器的属性分成几部分
使用 vertical-align middle 在 IE 中对齐内联块元素；对于表单元素，使用 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 在每一页上显示标题和页脚容器
使用 absolute:positioning 而不是 fixed positioning 以避免在每一页上显示标题和页脚容器