问题在于 Internet Explorer 8 及更低版本。找到了一个不错的工作解决方案。
问题
Internet Explorer 8 及更低版本不会触发click()由 jQuery 设置的事件（甚至可能是内联的，不确定）在<input />具有 CSS 属性的元素上display设置为none. 它适用于 Internet Explorer 9、Mozilla Firefox 和 Google Chrome。奇怪的。这就是代码的样子，Internet Explorer 8 及以下版本是否有任何解决方法？
语境
input要单击的 被赋予样式display: none;。并且函数是在 的情况click下给出的input。由于整个东西都在里面，它会在点击时label触发click事件。你可以把它当作某种漂亮的选择器，隐藏.inputlabelinput
默认情况下，label隐式将click事件转移到第一个input，这就是我想在这里使用的。我不希望用户在input这里看到丑陋的东西。预期的浏览器行为，但无法正常工作。
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"));
});
});
小提琴：http: //jsfiddle.net/qSYuP/
更新#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;}
作品！我没办法使用overflow: hidden;，严重中招了！
更新#4：手动触发click()功能：
$(document).ready(function(){
$("input").click(function(){
console.log("Hey you! " + $(this).attr("value"));
});
$("label").click(function(){
$(this).find("input").click();
});
});
好吧，IE 8 在打印1209次后就出栈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
LOG: Hey you! Button 3
SCRIPT28: Out of stack space
无限工作！应该是我的脚本的问题！
解决方案：有点糟糕的修复，但成功了！
因为是支持 IE 8 的缘故opacity，我不得不使用display: inline-block;with opacity: 0;。
ul li label input {
opacity: 0;
width: 0px;
height: 0px;
display: inline-block;
padding: 0;
margin: 0;
border: 0;
}
现在input' 框被隐藏了，从字面上看。此修复仅适用于 IE 8！
必须使用IE 8 及以下 Hack修复：
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;
}