HTTPS SSH

IE 兼容性解决方案

  • 在 li 裡包含 flow elements,并且 flow elements 的 overflow 設置為 hidden 時,會造成 li 兩倍高度,這裡可以將 li 的 list-style-type 設為 none 解決。

  • ie6 ie7 的 ul 使用 overflow: hidden 無法生效時,在 ul 中添加 position: relative;

  • 只支持 IE6 的选择器

    * html {{SELECTOR}} {
    }
    
  • 只支持 IE7 的选择器

    * + html {{SELECTOR}} {
    }
    
  • 针对 IE6 的 hack(注,如果样式的值含有 css expression,则以 !important 为最后的值。)

    body {
        background-color: red !important; /* 其他浏览器显示 red */
        background-color: green; /* IE6 会显示 green */
    }
    
  • 隐藏文字,示例见 hidden-text.html

  • 清除浮动

    /* 清除浮动 */
    .clearfix-container:after {
        content: '';
        display: block;
        overflow: hidden;
        clear: both;
    }
    .clearfix-container::after {
        content: '';
        display: block;
        overflow: hidden;
        clear: both;
    }
    .clearfix:sibling {
        clear: both;
    }
    * html .clearfix-container { /* for IE6 */
        display: inline-block;
    }
    * + html .clearfix-container { /* for IE7 */
        display: inline-block;
    }
    
  • IE6 中,设置浮动元素的 margin-leftfloat: left 时) 或 margin-rightfloat: right 时)可能造成双倍值(即双倍边距),可以通过设置浮动元素的 display: inline 来解决。

  • IE6 中,如果在浮动(float: left|right)元素后面的元素设置了 position: absolute,该元素可能会无法显示,可以通过在该元素中清除前面元素的浮动(clear: both)或在该元素前面插入一个正常流的元素(即具有 position: absolute 样式属性值的元素不要紧跟在浮动元素后)。

  • IE6 鼠标滚轮失效 bug(可能由于元素使用 position: absolute 定位,导致 body 没有撑起来而使滚动失效),通过重设 background,或设置 body 的高度解决。

  • 在 IE6~8 中,如果 label 元素内包含 img 元素,点击 img 元素时 label 无法响应,可以在 img 元素中添加 disabled 特性解决。

  • IE6 中当 DOM 元素重新渲染时,背景图片可能会重新请求,可以通过以下 script 来防止:

    <!--[if IE 6]>
    <script type="text/javascript">
        window.attachEvent("onload", function () {
            window.detachEvent("onload", arguments.callee);
            try {
                document.execCommand("BackgroundImageCache", false, true);
            } catch (ex) {}
        });
    </script>
    <![endif]-->
    
  • IE6 下,当一个元素的 position 值为 relative,并且它具有 haslayout 时,如果它的子元素不具有 haslayout,则该子元素的子元素(后代元素)的 background、border 等无法正常显示。解决方法:如果使该后代元素具有 haslayout 或在后代元素的前面添加一个其他的元素(或者 HTML 注释)demo-01.html。

  • 在 IE6、7 中,如果一个元素具有 float,其祖先元素具有 overflow: hidden,及 height,如果该元素或其子元素具有 position: relative,则该元素或其子元素会溢出祖先元素。

  • 在 IE6 中,具有 float 的元素,即便设置了该元素的高度,如果其子元素的高度大于该元素的高度,该元素的高度仍由子元素的高度决定。

  • font-face 的兼容性写法

    @font-face {
        font-family: "{{FONTFAMILY}}";
        src: url("{{FONTFILE}}.eot?#iefix") format("eot"),/* IE6-IE8 */
             url("{{FONTFILE}}.woff") format("woff"),/* Modern Browsers */
             url("{{FONTFILE}}.otf") format("opentype"),/* iOS, Android */
             url("{{FONTFILE}}.svg#{{svgFontName}}") format("svg");/* Legacy iOS */
    }
    

    {{FONTFAMILY}} 替换成具体的 font-family,{{FONTFILE}} 替换成具体的字体文件名,{{svgFontName}} 替换成具体的 svg 节点 ID。

  • 在 IE 中,如果嵌入的 flash 中使用 ExternalInterface 调用外部 JS 函数时,嵌入的标签(元素,object、embed)需要添加有效的 ID 值,否则会报“SCRIPT5007: 无法获取未定义或 null 引用的属性“SetReturnValue””或“错误:‘null’为空或不是对象”(IE6)

  • 在标准模式下(<!DOCTYPE html>),如果 table 里有 img 标签,在 img 元素下会产生一些空白间隔(产生原因见:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps)。 现解决方式有如下几种:

    1. 将 img 元素改成块级元素(如:img {display: block;});
    2. 将 img 元素的父标签的 line-height 值设为 0(如:td {line-height: 0;});
    3. 将 img 元素的父标签的 font-size 的值设为 0(如:td {font-size: 0;},如果在父标签下还有其他文字,可能会影响到这些文字);
    4. 将 img 元素的 vertical-align 的值改成 top(或 middle、inherit、bottom,如:img {vertical-algin: middle);
  • 在 IE6、7 中,如果一个具有 overflow: hidden 的元素的子孙元素具有 position: relative,则该元素的 overflow: hidden 对具有 position: relative 的子孙元素失效。解决方法:同时在该元素上添加 position: relative。

  • 在 IE6、IE7 中: 父元素:具有 hasLayout、display 为 inline; 子元素:具有 hasLayout、display 为 inline、position 为 relative; 如果子元素具有 margin-left 值,则 margin-left 失效(好像跑到 margin-right 后面去了)。 解决方法:子元素添加 float: left、或使用 padding-left 代替等。

  • 在 IE6、IE7 中: li 元素具有 display 为 block,并固定一个高度时,如果 li 元素内为空或只包含注释元素,或 li 元素之间包含注释元素时,li 元素之前可能会存在空白间隔。 解决方法:把 li 元素的 vertical-align 设置成不为 baseline。

  • 在 android 2 ~ 4.3 中,当元素的 position 为 absolute 时,margin-{top/bottom} 的值如果为百分比(%),则其是相对于包含块的高度而不是宽度。

  • 在 android 4.4 中,可以在事件 touchend 中调用 Event.prototype.stopImmediatePropagation() 来阻止触发 click 事件。

  • 在 android 2.3 中,如果在 <meta name=viewport> 中设置 user-scalable=no,则会导致应用了 position: fixed 的元素的 transform 失效。解决方法,可以把 user-scalable=no 改成 minimum-scale=1, maximum-scale=1。但这时, position: fixed 会失效,可以在 position: fixed 的元素上添加 -webkit-backface-visibility: hidden 来解决。

  • 在 Firefox 中,lang 属性值会对 text-align: justify 的排版产生影响,如需要设置成 zh,才会对中文进行分散对齐。