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

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

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

问题出在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;
}

提问于
用户回答回答于

有点糟糕,但成功了!

因为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;
}

热门问答

在小程序开通直播功能,是不是还需要业务去申请直播的证书?

推荐
腾讯云有商业直播方案(提供小程序直播插件),客户通过直播插件实现直播业务(不需额外提供直播资质) 插件对接条件: 客户小程序类目为“电商平台”或“在线教育” 所以就是说, 只要用了腾讯云的小程序直播方案, 小程序的类目为 “电商平台” 或“ 在线教育”, 就可以。只要自身业务不...... 展开详请

我刚申请的服务器,缺省给我的是linux,可我要Windows,怎么办?

蒋小爱

腾讯云 · 技术支持 (已认证)

推荐
云服务器提供 不同平台重装:仅支持中国大陆地区(不含中国香港)。 例如,Linux 重装为 Windows,Windows 重装为 Linux 。 参考 重装系统: https://cloud.tencent.com/document/product/213/4933 图片.p...... 展开详请

腾讯云 TRTC 互动直播 云直播 商业直播区别是什么?

人生的旅途辣鸡前端
推荐
云直播:腾讯云的直播云端处理分发平台 移动直播:腾讯云提供的直播推拉流集成的sdk(iOS、Android、小程序) 互动直播:云直播(云端)+移动直播(终端)+连麦功能 商业直播:基于云直播的直播小程序插件(SaaS腾讯云提供页面模板,PaaS客户自己开发) 商业直播和移动直播...... 展开详请

关于ti-one平台问题?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐
您好,感谢您的提问。 TI-ONE平台里的任务是运行在Linux系统上的; 目前TI-ONE工作流任务暂不支持实时查看显存使用情况,notebook任务可在右侧资源栏查看; TI-ONE已上线计费,但目前试运营阶段限时0折。试运营阶段结束,正式开启收费前会提前通知用户定价变动,还...... 展开详请

合作伙伴学院里的学习视频测试题和在线培训系统里的测试题能否提供答案?

骑牛看晨曦love&peace~
推荐

http://tencentcloudxuexi.com 合作伙伴可以登录此平台做练习题,有答案的喔

云服务器不能访问外部网站?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐
不能访问外部网站一般是网络和dns的问题,按照如下步骤排查: 1. 确保CVM有外网ip或者NAT转换,使用ping测试下外网的连通性,如果不通请购买弹性公网IP,先申请后购买参考https://cloud.tencent.com/document/product/215/201...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券