浏览器兼容——IE6 IE7 IE8

1.  在 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 属性)。

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

在 IE6 IE7 IE8(Q) 中,在通过 border-collapse:collapse 使用表格的重合边框模型后,其 cellspacing 属性仍然有效;在其他浏览器中,此时的 cellspacing 属性不再生效。
在使用 border-collapse:collapse 时应保证 TABLE 元素的 cellspacing 属性值为 0。

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

使用标准模式。
在 IE6(Q) IE7(Q) IE8(Q) 中如需为 IMG 元素设置 'padding' 特性,需要在 IMG 元素外加一层容器标签,为该标签设置 'padding'。

4.  IE6 IE7 IE8(Q) 中可被渲染的绝对和固定定位元素将消除其后紧邻它的触发了 hasLayout 特性的块级元素的 margin-top

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

5.  在 IE6 IE7 IE8(Q) 中实现块元素的 ‘display:inline-block’ 特性值支持

尽量仅使用所有浏览器都支持的 'display' 特性值:'inline'、'block'、'list-item'、'none'。
 在 IE6 IE7 IE8(Q) 中实现块元素的 'display:inline-block' 特性值支持,需要先将块元素设置为行内元素,并设置可以在 IE6 IE7 IE8(Q) 内触发 haslayout 特性的专有特性 'zoom:1'。行内元素实现 'display:inline-block' 特性值支持只需直接设置此特性值或同样使用 'zoom:1' 即可。

IE6/7下解决inline-block问题

.k2-inline-block{
 display:-moz-inline-stack;
 display:inline-block;
 *display:inline;
 *zoom:1;
 vertical-align:middle;
 position:relative;/* 解决因为父容器{display:inline;}问题导致Firefox中li里面的链接不可点的bug */
 _position:static;/* 解决因为IE6中因为上一行代码带来在{position:relative}容器中移位在bug */
 }

6.  为什么web标准中IE无法设置滚动条颜色了?

<style type="text/css">body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }</style>
解决办法是将body换成html

7.  ‘margin-left’、’margin-right’ 特性指定的值会应用于其相应方向的 padding 上

IE6 IE7 IE8(Q) 中,若一个触发了 hasLayout 的元素其内第一个非空白节点 (即 children[0]) 为 TEXTAREA 元素 或者 type 属性值为 text、password、submit、reset、button、file 的 INPUT 元素,并且这个元素设定了 'margin-left'、'margin-right' 特性,则 'margin-left'、'margin-right' 特性指定的值会应用于其相应方向的 padding 上。

在 INPUT、TEXTAREA 元素之前放一个触发了 hasLayout 的空 SPAN 元素。
<span style="zoom:1;"></span>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注