1. A标签的兼容性，伪类规范顺序：L-V-H-A;
':link' ：适用于未被访问的链接。
':visited' ：适用于已经访问过的链接。
':hover' ：在可视化客服端上，适用于光标（鼠标指针）指向一个元素，但还未激
活它时。
':active' ：适用于一个元素被用户激活时。
2. Font-family字体正确书写BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
3. 短横线与下划线不同的浏览器兼容不一样：
4. 单位缺失：CSS中与动态DOM中缺失单位兼容情况不一样；
A. DOM:
在IE、Opera、Firefox/Chrome/Safari(Q)中，使用DOM动态设置长度类型的CSS特性时，若设置的值没有单位，浏览器会自动为其添加“px”单位；在Firefox/Chrome/Safari(S)中，浏览器会将缺失单位的属性值忽略。
B. 所有浏览器的混杂模式均将此缺少单位类型的长度类型CSS特性理解为以“px”为单位；而所有浏览器的标准模式均将此认为是错误的CSS代码而忽略。
5. Firefox浏览器对table中绝对定位元素包含块的判定错误及其影响:这是Firefox的一个bug，绝对定位元素position:absolute无法在Firefox中根据它的祖先table定位，而会依赖更高一级祖先定位。Table元素指的是display:table;解决：设置祖先：position:relative;
6. 对于没有固定高度的绝对定位的元素，IE6解释为shrink-to-fit的自适应宽高；而其他浏览器会自动根据left/top值与祖先容器的大小来计算该元素的宽高；
解决：
A. 尽量固定绝对定位元素的宽高；
B. JS计算高度的解决办法：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="backgroundcolor:
gray;width:100px;height:100px;position:relative">
<div id="d" style="backgroundcolor:
black;position:absolute;left:10px;right:10px;top:10px;bottom:10px;color:white;_width:expression(- parseInt(this.style.left)-parseInt(this.style.right));
_height:expression(parseInt(this.offsetParent.currentStyle.height) -
parseInt(this.style.top)-parseInt(this.style.bottom));">test</div>
</div>
</body>
</html>
7. IE对CSS2.1的支持缺陷：
A. IE6(QS)/IE7(Q)/IE8(Q)不支持!important提高优先级的方式；
B. Display:inherit;//span元素将继承祖先div的block样式；但在IE6(QS)/IE7(Q)(S)/IE8(Q)中不会继承；
C. 子选择器、兄弟选择器、相邻兄弟选择器、属性选择器：div>p{} div~p{} div+p{} div[id]；IE6(QS)/IE7(Q)/IE8(Q)中不支持；Bug：在IE7中，如果在兄弟之间有一个HTML注释，临近兄弟选择器将无效。
D. :first-child伪类匹配其他元素的第一个子元素；非锚点元素的:hover伪类；非锚点元素的:active伪类；:focus伪类定位获取了键盘焦点的所有元素，如input:focus{}；:before伪元素和:after伪元素用来在一个元素的内容之前或之后插入生成的内容，如p:before {
E. content: "before";
F. }
G. min-height 和 min-width这两个属性分别指定元素的高和宽的最小值，不允许一个盒子比指定的最小值小；max-height 和 max-width这两个属性分别指定元素的高和宽的最大值，不允许一个盒子比指定的最大值大。display 属性通常设置为block, inline, 或none。替代值包括：
• inline-block
• inline-table
• list-item
• run-in
• table
• table-caption
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group
H. outline特性：outline 是outline-style, outline-width, 和outline-color的缩写。该属性要优于border属性，因为它不会影响文档流。
I.
J. IE对子元素溢出祖先元素后，背景的解释不一样：IE将溢出部分也使用背景填充；而其他则不然；
解决：可用JS模仿一些低版本IE不支持的CSS标准。
8. IE中不合理的overflow-x和overflow-y组合：
Border会影响空白边是否折叠；
Overflow: visible,hidden,scroll,auto,inherit;
overflow和overflow-x/overflow-y的默认值都是'visible'。CSS3草案中规定，'overflow-x'和'overflow-y'的计算值与所设置的值相等，除非这一对值不合理。所以，如果其中一个被设置成'scroll'、'auto'、'hidden'之一，而另一个是'visible'，那么'visible'会被设置成'auto'。
同时设置overflow-x和overflow-y的值，不要使它出现其中之一'scroll'、'auto'、'hidden'时，而另一个是'visible'的情况。
9. Clear:如果有float:left;则相应的clear:left;和clear:both;能清除浮动；
在IE6(S)(Q)/IE7(S)(Q)/IE8(Q)如果clear特性被设置在一个浮动的元素上时，该浮动元素可能会与其前边的浮动元素放置在同一行。而且其后的浮动元素的位置也会出现不同情况。
解决：不要将“clear”特性应用在浮动元素上，以免出现上述不兼容的问题。
10. 空的有haslayout的块元素的高度问题：在IE6/IE7/IE8(Q)中，如果空的块级非替换元素触发了hasLayout，那么它的高度可能不是零，并且，这个高度跟font-size有关系。甚至，font-size是0的块级非替换元素的高度也不是0。还甚至，如果为该块元素设置了高度，这个高度会因为字体大小font-size而发生变化。
解决：如果想让一个块级非替换元素的高度为0，在IE中无法实现，但设置font-size为0可以使高度接近0；另外，不让元素在IE中触发hasLayout可以避免此bug。
11. 行内元素被其子元素的高度撑大：这类溢出，导致背景覆盖的情况不一致，IE会自动将溢出部分也添加背景；
解决方法：将该行内元素改为display:inline-block,其高度将会根据子元素自动计算高度；或者为其设置合适的font-size大小；
Width/height值可能被其内容撑大；
12. 避免使浮动元素的宽度超出其包含块的宽度；
当文字方向“direction”特性为“ltr”时应避免使右浮动元素的宽度超出其包含块的宽度。同样地，当文字方向“direction”特性为“rtl”时应避免使左浮动元素的宽度超出其包含块的宽度。
13. IE默认body背景色：
E6及IE(Q)中BODY元素的背景色不是CSS规定的transparent，而是#FFFFFF。这个#FFFFFF是由background-color:window得来，window属性为是Windows系统主题设定的“窗口背景色”，这个设置会影响很多程序的窗口背景色，而其他浏览器多不受此影响。
IE中IFRAME元素有一个专有的allowtransparency属性，当其值为“true”时，IFRAME元素可以透明。
14. Table的宽度，不要设定超过100%；不要设定内联宽度，而使用css的宽度；否则ff下会被撑大；
15. text-decoration:underline;作用于图片上，ie会忽略该样式，而标准会为img添加下划线；如果出现图片与文字同时存在，而又必须使用下划线的情况时，可以为图片增加白边调整高度以挡住下划线：如img {padding-bottom:3px; background:white; position:relative; top:3px;}
16. word-wrap: normal/break-word; 即当容器不足以包含单词时，单词将会强制换行。
注：对于select元素不使用wordwrap:break-word避免换行样式变形。
word-wrap:break-word可能导致在IE6/7及IE8(Q)中空格不被忽略
17. haslayout与block formatting context
18. z-index为自动时，不同定位的元素可能导致不同浏览器不同；所以，出现不同情况时，只能为特定层指定z-index来定位；
每个层叠上下文都有如下的层叠级别组成（显示顺序从后到前）：
1. 父级层叠上下文的背景和边框；
2. 层叠级别为负值的层叠上下文（越小越在下）；
3. 非行内、非定位的子元素；
4. 非定位的浮动子元素和它们的内容；
5. 行内非定位子元素；
6. z-index=auto的定位子元素，和任何z-index=0的层级上下文；
7. 层叠级别为正值的层叠上下文（越大越在上）。
19. 动态伪类:hover:focus:active是根据用户的动作而改变渲染效果；
不同浏览器支持情况不一致：IE6及IE7/8混杂模式仅支持A元素的:hover及:active，IE7标准模式支持所有元素的:hover但:active仍仅支持A元素，除IE8标准模式以外的IE均不支持:focus。
解决方案：
• 使用JavaScript绑定onmouseover/onmouseout（模仿:hover）、onmousedown/onmouseup（模仿:active）及onfocus/onblur（模仿:focus）；
• 使用Whatever:hover，该组件利用IE特有的CSS行为（behavior）仍然通过JavaScript来模拟这几个动态伪类的效果。
20. text-overflow可以作用于块级元素、行内元素和单元格，当其值是ellipsis时是作用是将被剪除的文本用省略号表示。
21. 各浏览器对CSS错误解析规则的差异及CSS hack.pdf
22.
23.
分享到：
相关推荐
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的...
### JavaScript 解决浏览器兼容性问题 #### 一、引言 在前端开发中，浏览器兼容性问题一直是开发者面临的重要挑战之一。随着不同浏览器版本的更新迭代，如何确保Web应用能够在各种浏览器环境中正常运行成为了关键...
### 浏览器兼容性解决方法：深入解析与实践技巧 在Web开发中，确保网站在不同浏览器上表现一致是一项挑战。本篇文章将基于提供的文件信息，深入探讨浏览器兼容性的解决方法，尤其针对Firefox、IE等主流浏览器进行...
浏览器兼容性设置是Web开发中的一个关键议题，尤其是在多浏览器环境下。不同的浏览器使用不同的渲染引擎，这导致了它们对HTML、CSS和JavaScript的解析和执行存在差异，从而影响到网页的展示效果。以下是对主要浏览器...
浏览器兼容性问题一直是Web开发中的一个棘手挑战，尤其是在历史版本的Internet Explorer（IE）浏览器中，这些问题尤为突出。浏览器兼容性问题主要由于浏览器引擎的bug、网页标准的更新以及不同浏览器对标准的不同...
浏览器兼容性问题一直是Web开发中的一个关键挑战，尤其是在构建跨平台、多设备的网页时。黄昊在WebRebuild北京第一届交流会上所分享的《浏览器兼容性问题简介》揭示了这些问题的核心及其解决策略。 首先，浏览器...
在第八章"HTML Table局部布局与浏览器兼容性"中，我们将会深入探讨如何有效地使用表格进行布局，以及在不同浏览器间保持良好的兼容性。在这个主题中，我们将触及以下几个关键知识点： 1. **表格的基本结构**：HTML...
浏览器兼容性问题一直是前端开发中的重要议题，尤其是在2016年及以前，各种浏览器的市场份额和解析标准差异较大，导致开发者需要面对多种浏览器的显示差异。本文将针对标题和描述中提到的常见浏览器兼容性问题及其...
`WebDriver`、`TestNG`和`ANT`是三个强大的工具，它们协同工作可以帮助我们实现多浏览器兼容性测试。下面将详细阐述这三个工具及其在实际应用中的作用。 `WebDriver`，也称为Selenium WebDriver，是一种用于自动化...
浏览器兼容性是指不同的浏览器对于同一段代码可能会有不同的解析方式，从而导致页面在不同的浏览器上显示效果不一致的问题。这是前端开发中非常重要的一个问题，它直接关系到网站或应用在用户端的展示质量。 在讨论...
浏览器兼容性测试工具 浏览器兼容性测试是前端开发工程师的一项重要任务。为了确保代码在各种主流浏览器的各个版本中都能正常工作，需要使用专业的测试工具。本文介绍了11款超赞的浏览器兼容性测试工具，帮助开发者...
资源名称：浏览器兼容性问题简介内容简介：浏览器兼容性问题分类浏览器的“模式”如何编写具有良好兼容性的网页显示问题：CSS兼容性height/width, position:fixed, …脚本问题：Java ｓｃｒｉｐｔ 兼容性DOM, Date....
【浏览器兼容性问题】是IT领域中一个长期存在的挑战，特别是在网页开发中。浏览器兼容性问题主要源于不同浏览器对Web标准的实现不一致，尤其是在早期Web发展的阶段，各大浏览器厂商如Internet Explorer、Firefox、...
然而，不同的浏览器对于CSS的支持程度和实现方式可能存在差异，这就涉及到了“浏览器兼容性”问题。"CSS浏览器兼容性速查"是开发者在工作中不可或缺的一个参考资料，它帮助我们了解各种CSS属性在不同浏览器上的表现...
浏览器兼容性问题一直是Web开发中的一个棘手挑战。随着W3C推动标准的实施，Firefox、Chrome、Safari和Opera等浏览器的崛起，虽然在很大程度上促进了浏览器对标准的遵守，但也导致了不同浏览器间存在的差异，使得网页...
标题“测试浏览器兼容性ietester”和描述提到了一个名为“ietester”的工具，它是一个用于测试浏览器兼容性的利器。下面将详细阐述浏览器兼容性测试的重要性、ietester的功能特点以及如何使用它来优化Web应用。 ...