按钮在 IE 中不起作用，在 Firefox/Opera/Chrome 中正常答案

【问题标题】：Button not working in IE, fine in Firefox/Opera/Chrome按钮在 IE 中不起作用，在 Firefox/Opera/Chrome 中正常
【发布时间】：2011-03-01 15:24:58
【问题描述】：

我的网站上有一个简单的轮播，但是一旦我的代码被插入到客户的系统 (force.com) 中，就会阻止按钮在 IE 中工作。

“上一个”按钮可见，但不可点击。 “下一步”按钮很好。

我网站上的轮播：http://carolineelisa.com/TITTB/html/carousel.html

编辑：客户的网站：http://www.tittb.org/

代码：

<div id="hasJavaScript" style="display: none">
  <button type="button" class="prev"></button>
  <div class="carousel">
    <ul>
      <li><img src="images/carousel_thumb_2.jpg" alt="" width="190" height="105" class="carousel-item-2"></li>
      <li><img src="images/carousel_thumb_3.jpg" alt="" width="190" height="105" class="carousel-item-3"></li>
      <li><img src="images/carousel_thumb_4.jpg" alt="" width="190" height="105" class="carousel-item-4"></li>
      <li><img src="images/carousel_thumb_5.jpg" alt="" width="190" height="105" class="carousel-item-5"></li>
      <li><img src="images/carousel_thumb_1.jpg" alt="" width="190" height="105" class="carousel-item-1"></li>
    </ul>
  </div>
  <button type="button" class="next"></button>
</div>

CSS

button.prev {
background: url("carousel_arrow_left.gif") no-repeat scroll left center transparent;
width: 23px;
height: 105px;
float: left;
padding:0;
margin:0;
}
button.prev:hover {
    background-position: -30px center;
}
button.next {
    background: url("carousel_arrow_right.gif") no-repeat scroll 5px center transparent;
    width: 15px;
    height: 105px;
padding:0;
margin:0;
}
button.next:hover {
background-position: -25px center;
}

【问题讨论】：

什么版本的IE？我在 IE9 和兼容模式（IE7？）中没有发现任何问题
谢谢丹尼尔！ @jeroen，嗯，这就是问题所在......它适用于我的，但不适用于 IE8 中的客户端
好的，他们已经开始直播了，所以这里是网站：tittb.org

标签： css internet-explorer button cross-browser

【解决方案1】：

使用<input type="button" /> 而不是<button type="button"></button>

您还必须更改 CSS 中的单词 button。然后是input.prev 和input.next

引自 W3Schools：

重要提示：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。 Internet Explorer 将提交 and 标记之间的文本，而其他浏览器将提交 value 属性的内容。使用 input 元素在 HTML 表单中创建按钮。

【讨论】：

这没有什么区别，它们没有被提交，它们只是 javascript 事件的钩子。 button 比 input 更容易设置样式，尽管在这里也可以使用简单的 a...

【解决方案2】：

您可以使用 firebug 并且能够看到幕后发生的事情，但是您很有可能面临这种情况 CSS Problem behind content not clickable

相信跟input type="button"或者button type="button"没有关系

【讨论】：