标签: ie6

  • ie6样式中多class的bug

    IE6 有个多个 class 样式的 bug,具体表现为:当为一个元素连用 2 个及以上的 class 来匹配样式时(如:p.a.b),ie6 会识别为样式规则中最后一个 class 的定义(即:p.b)。

    这样一来,不但多 class 的样式不正确,还可能会覆盖掉原对应 class 的样式(如 .b 的样式)。

    下面截图最后一行有误,class 应为 “a c”

    ie6 multiple class bug

    上面截图最后一行有误,class 应为 “a c”

    Demo 页面

  • 解决IE6点击链接无法跳转

    出于减少空链接的目的,对于非实际链接而是触发 JS 效果的 a 标签,我一般都是使用 “javascript:;” 来设其 href 值而不是 “#”,然而最近碰上在 IE6 下这种情况无法跳转页面的情况:比如说,对于一个 href 为 “javascript:;” 的 a 链接,绑定点击时通过设置 window.location.href 来进行页面跳转,但在 IE6 下会无法进行跳转。实际上代码没有出错,location 后面的语句也可以执行的。

    解决方法有二:

    1. 点击处理函数增加阻止默认事件
    2. reset href

    对于 IE6,阻止默认事件可以简单使用 if (window.event) window.event.returnValue = false

    至于 reset href,则是将触发事件的链接改为 ‘#’,然后再调整;或者直接将其 href 值改为需要的目标地址。

    Demo (更多…)

  • 小心Dom元素的name属性

    对于一个用 JavaScript 获取到一个 DOM 节点的后,在说到属性的时候需要注意的是指 DOM 节点的属性还是 JavaScript 对象的属性(或说字段名)。一般来说,前者用 getAttribute/setAttribute 来访问/修改,后者用 object.field 来访问。然而,对于像 id、className 这些却属于 DOM 节点的 Attribute 范围。在说到 name 属性的时候,就更加复杂一点了,因为牵涉到 IE 的特殊处理。

    当想用 setAttribute 给一个已有的(或动态创建的) DOM 元素设置 name 属性时,将会发现 IE6/7 跟 form 及相关表单元素合不来,根本就没有设置成功。

    微软的文档,在 IE6/7 中,form 表单时的 name 属性是有些特殊的,用来标志提交的数据,跟平常的用途有些不一样。

    var createNamedElement = function (type, name) {
        var element = null;
        // Try the IE way; this fails on standards-compliant browsers
        try {
            element = document.createElement('<'+type+' name="'+name+'">');
        } catch (e) {
        }
        if (!element || element.nodeName != type.toUpperCase()) {
            // Non-IE browser; use canonical method to create named element
            element = document.createElement(type);
            element.name = name;
        }
        return element;
    };
    
    // create an input element with name
    var aInput = createNamedElement('input', 'aInp');
    

    如果只是需要创建一个节点而不需要后续引用继续修改的话,我会更加倾向于直接用 innerHTML 来创建,比如:

    someNode.innerHTML = someNode.innerHTML + '<input type="button" name="aButton" value="This is a button" />';
    

    需要注意的是,对于 name 属性,在表单类中 attribute 和 field 是相同的,但在非表单中, attribute 中的才是 HTML 代码中可见的 name 属性。

    See more demo


    References:

    1. Weird behaviour of iframe `name` attribute set by jQuery in IE
    2. NAME Attribute | name Property
    3. Setting the “name” attribute in Internet Explorer
  • IE6块元素高度问题

    在 IE6 中 block 空元素高度无法直接通过 height 设为0,具体和字体大小、行距有关,一个简单的解决方法是设置 oveflow 为 hidden。


    Reference:

    CSS设置IE6中容器高度BUG

  • min-height

    没太多好说的,只是为了 IE6 而已。

    min-height:150px;
    _height:150px; /* hack for ie6 */
    

    demo