内容如题

• 1、在 IE5.0 IE5.5 IE6 中，当为一个块级元素同时设置了向左浮动（float:left）及左边距或右边距（’margin-left’ | ‘margin-right’）后，则该元素的左边距或右边距在某些情况下会是设定值的两倍。同样地，向右浮动（float:right）及右边距（’margin-right’）也存在此现象。这个是 IE 著名的 “双边距Bug”（IE Double Margin Bug）。

  解决办法：

  • 尽量避免同时使用 ‘margin-left’ 与 float:left，及 ‘margin-right’ 与 float:right；
  • 由于这个 Bug 对于 ‘display’ 特性为 ‘inline’ 的元素不会触发，所以可以通过设置 display:inline 消除此 Bug，由于此 Bug 仅在元素浮动时发生，而浮动将使该元素 ‘display’ 特性计算为 ‘block’ 或者 ‘table’（见 CSS2.1 规范第 9.7 Relationships between ‘display’, ‘position’, and ‘float’ 节），因此可以通过设置 display:inline 消除双边距 Bug。

• 2、对于溢出单元格的内容，IE6 IE7 IE8 混杂模式始终会对溢出部分进行隐藏，而不考虑单元格的 ‘overflow’ 特性，就好像单元格始终设置了 “overflow:hidden” 一样。

  解决办法：遵照 W3C 规范所描述的，为单元格元素设置 “overflow:hidden” ，在所有浏览器中均会裁切溢出单元格的内容。

• 3、在 IE6 IE7 IE8(Q)中，若 TD 元素没有明确设定 ‘white-space’ 特性，其值为继承自其父元素的值，则其内的子元素不再能够自动继承 TD 的 ‘white-space’ 特性。并且若 TD 元素明确设定了 ‘width’ 特性，则 TD 元素本身的 ‘white-space’ 特性自动变为了初始值 ‘normal’。

  解决办法：明确地为 TD 的子元素设置 ‘white-space’ 特性，避免使 TD 元素自动继承父元素的 ‘white-space’ 特性。或者避免同时为 TD 元素设置宽度及 white-space:nowrap（或是 nowrap 属性）。

• 4、明确地为 TD 的子元素设置 ‘white-space’ 特性，避免使 TD 元素自动继承父元素的 ‘white-space’ 特性。或者避免同时为 TD 元素设置宽度及 white-space:nowrap（或是 nowrap 属性）。

  解决办法：由于 TABLE 元素的 align 属性已经被 W3C 废弃，所以在考虑 TABLE 元素对齐问题上应避免使用 align 属性，而改用 CSS。

  • 使用CSS的 float:left 代替 align=”left”；
  • 使用CSS的 float:right 代替 align=”right”；
  • 使用CSS的 margin-left:auto 及 margin-right:auto 代替 align=”center”。

• 5、A 元素缺少 href 属性时，在 IE6 IE7 IE8(Q) Chrome(Q) Safari(Q) 中 ‘:hover’ 和 ‘:active’ 伪类会失效。

  解决办法：如果需要一个 A 元素能根据用户的行为改变样式，请添加 A 元素的 ‘href’ 属性使伪类生效。

• 6、当为 BR 元素设置 ‘line-height’ 特性时，在 IE8(S) Firefox(S) Chrome Safari 中 BR 元素的 ‘line-height’ 特性的计算值不会小于其继承值。在 IE6 IE7 IE8(Q) Firefox(Q) Opera 中计算后则可能会小于其继承来的 ‘line-height’ 特性的计算值。

  解决办法：尽可能不为 BR 元素设定一个可能小于其继承值的值。

• 7、IE6 IE7 IE8(Q) 中，对于 U-A 及 A-U 元素嵌套结构，只要最内层元素的 ‘text-decoration’ 为 ‘none’ ，则其内容文本就不会出现下划线。
  IE6 IE7 IE8(Q) 中，对于 A 元素包含 S 元素，A 元素设置了 text-decoration:line-through ，S 元素设置了 text-decoration:none，而此时对于 S 元素，浏览器不再为其渲染删除线。

  解决办法：U、S 元素本身是废弃元素，应避免使用，而用 CSS 相关特性来替代这些元素产生的效果。

• 8、IE6 IE7 IE8(Q) 中 cellspacing 属性在重合的边框模型的表格中仍然有效。

  解决办法：在使用 border-collapse:collapse 时应保证 TABLE 元素的 cellspacing 属性值为 0。

• 9、在 IE Chrome Safari 中，IFRAME 元素引入的子页面 HTML 元素的 “overflow:hidden” 会使 IFRAME 元素的 scrolling 属性失效，IFRAME 元素不会出现滚动条。
  在 Chrome Safari 中，虽然 IFRAME 元素的 scrolling 属性为 “no”，但若其子页面的 HTML 或 BODY 元素的 ‘overflow’ 特性为 ‘scroll’，则 IFRAME 仍会被渲染上滚动条。

  解决办法：W3C 规范并没有说明 scrolling 属性应该控制子页面哪个元素的滚动条的生成或者 ‘overflow’ 特性，为防止在某些情况下 Chrome Safari 的 IFRAME 子页面中出现多余滚动条，应避免为 HTML 或者 BODY 元素设置 overflow:scroll。

• 10、IE 混杂模式(Q) 中给 IMG 元素设置 ‘padding’ 特性无效。

  解决办法：使用标准模式。
  在 IE6(Q) IE7(Q) IE8(Q) 中如需为 IMG 元素设置 ‘padding’ 特性，需要在 IMG 元素外加一层容器标签，为该标签设置 ‘padding’。

• 11、在 IE6 IE7 IE8(Q) Firefox(Q) Opera(Q) 中，FONT 元素的 color 属性指定的颜色可以覆盖由其祖先元素生成的 ‘text-decoration’ 修饰效果的颜色。
  在 Chrome(Q) Safari(Q) 中，FONT 元素的 CSS ‘color’ 特性指定的颜色可以将由其祖先元素生成的 ‘text-decoration’ 修饰效果的颜色覆盖。

  解决办法：FONT 元素本身是废弃元素，并且其所有属性均已不推荐使用，应避免使用 FONT 元素。
  FONT 元素的 size、color、face 属性可以分别使用 SPAN 元素搭配 ‘font-size’、’color’、’font-family’ 这几个 CSS 特性实现相同的效果。

• 12、不同浏览器中 Flash 与其他元素发生覆盖时， Flash 与其他元素的层叠顺序有差异。

  解决办法：若有页面需求是要求其他元素遮挡 Flash

  • 使用 EMBED 引入Flash 。
  • wmode的值使用 ‘transparent’ 或 ‘opaque’ 。
  • 使用的 iframe 需要设置背景色(设置为白色)。

• 13、在 Chrome Safari 中，若表格设定了 cellspacing 属性或者 ‘border-spacing’ 特性，则由于设定的单元格上下间隙会作用在 THEAD、TBODY、TFOOT 元素内部，会导致这些元素之间会出现双倍的间隙。

  解决办法：CSS 规范并没有明确说明单元格间隙的作用位置以及行组元素对其的影响，所以为了避免差异应避免在包含 THEAD、TBODY、TFOOT 这类行组元素的表格内设定非 0 的单元格间隙 (cellsping 属性或 ‘border-spacing’ 特性)。

• 14、在 IE6 IE7 IE8(Q) 中，无论容器的宽度为多大，其内所有 align 属性设置为 ‘left’ 或 ‘right’ 的 IMG、OBJECT、TABLE、IFRAME 等元素将始终显示在一行中。并不会随着其包含块宽度的缩小而发生折行现象。

  解决办法：align 属性已被废弃，应避免使用这类 HTML 属性。为 IMG、OBJECT、IFRAME、TABLE、APPLET、EMBED 元素使用 CSS 的 ‘float’ 特性以达到相同的效果。

• 15、IE Opera 中会将 image 选择器解释为 IMG 选择器，其他浏览器不存在此问题。

  解决办法：严格按照 CSS2.1 及 DOM 规范的规定书写代码，避免作为 CSS 选择子以及在脚本中需要传入 HTML 标签名的方法中使用 IMAGE 关键字。

• 16、CSS2.1 规范中并没有明确说明对于应用 “shrink-to-fit” 算法计算宽度的元素内包含 ‘width’ 特性单位为 “百分比” 的元素时究竟应该如何计算父子元素的宽度。但 IE 在此类情况下，对于宽度的计算与规范中明确说明的规定有明显出入，导致计算的宽度与其他浏览器有很大的差异。且与文档模式有关。

  解决办法：

  • 明确为浮动元素设置一个宽度值，避免其在进行 “shrink-to-fit” 计算时在不同浏览器之间出现的宽度计算差异。
  • 若浮动元素出于某些情况必须使用 “shrink-to-fit” 宽度时，则应尽量保证其内子元素的宽度不依赖其自身宽度，如使用 px 为单位的宽度值。

• 17、当某块级元素设置了 margin-top ，并且之前存在着可被渲染的绝对定位元素时，其 margin-top 在 IE6 IE7 IE8(Q) 会失效。

  解决办法：针对这类低版本 IE 浏览器的 bug，请尽量避免满足其所有触发条件。如本例中所需间隙可以采用其它设置元素的 margin-bottom或问题元素的 padding-top 等方式来弥补。