Ie 8及以下不触发单击具有显示的元素吗?有解决办法吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (30)

问题出在Internet Explorer 8及以下版本。找到一个体面的工作解决方案。

问题

对于CSS属性设置为的元素,Internet Explorer 8及以下版本不会触发triggeringclick()事件。它适用于Internet Explorer 9,Mozilla Firefox和Google Chrome。是否有Internet Explorer 8及以下版本的解决方法?

HTML

<ul>
    <li>
        <label>
            <input type="button" value="Button 1" />
            Hello! This is a list item #1.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 2" />
            Hello! This is a list item #2.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 3" />
            Hello! This is a list item #3.
        </label>
    </li>
</ul>​

CSS

ul li,
ul li label {display: block; padding: 5px; cursor: pointer;}
ul li label input {display: none;}
ul li {border-bottom: 1px solid #ccc;}
ul li:hover {background-color: #eee;}​

JavaScript

$(document).ready(function(){
    $("input").click(function(){
        alert("Hey you! " + $(this).attr("value"));
    });
});​

更新#1:尝试给出的for属性:

<label for="btn1">
    <input type="button" value="Button 1" id="btn1" />

仍然不起作用!

更新#2:试过CSS visibility: hidden;

ul li label input {visibility: hidden;}

打破布局。但是,仍然不起作用!

更新#3:尝试CSS position: absolute;

ul li label {overflow: hidden;}
ul li label input {position: absolute; left: -99em;}

更新#4:手动触发click()功能:

$(document).ready(function(){
    $("input").click(function(){
        console.log("Hey you! " + $(this).attr("value"));
    });
    $("label").click(function(){
        $(this).find("input").click();
    });
});

LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
SCRIPT28: Out of stack space 

解决方案:一种蹩脚的解决方法,但做到了!

既然是因为IE 8,支持opacity,我不得不用display: inline-block;opacity: 0;

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

此修复程序仅适用于IE 8!

修复使用IE 8及以下

ul li label input {
    opacity: 0\9;
    width: 0px\9;
    height: 0px\9;
    display: inline-block\9;
    padding: 0\9;
    margin: 0\9;
    border: 0\9;
}

提问于
用户回答回答于

我认为这很简单。你只需在可见项目上使用点击处理程序。如果你想在点击<label><li>时,<input>对象是隐藏的,你想让它在所有的浏览器,那么你只需要把单击处理在任一<label><li>上。

用户回答回答于

有点糟糕,但成功了!

因为IE8支持opacity,我不得不用display: inline-block;opacity: 0;

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

现在input盒子是藏起来的。这个补丁只适用于IE8!

ul li label input {
    opacity: 0\9;
    width: 0px\9;
    height: 0px\9;
    display: inline-block\9;
    padding: 0\9;
    margin: 0\9;
    border: 0\9;
}

所属标签

可能回答问题的人

  • 天使的炫翼

    17 粉丝531 提问36 回答
  • 富有想象力的人

    3 粉丝0 提问30 回答
  • 学生

    3 粉丝476 提问28 回答
  • o o

    4 粉丝494 提问27 回答

扫码关注云+社区

领取腾讯云代金券