Question

我的网站上有一个简单的轮播，但是一旦我的代码插入客户端的系统（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;
}

Answer 1

使用<input type="button" />代替<button type="button"></button>

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

W3Schools引用：

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

Answer 2

你可以使用萤火虫并且能够看到引擎盖下发生了什么，但你很有可能面对这种情况 CSS Problem behind content not clickable

我认为与输入类型=“按钮”或按钮类型=“按钮”

无关

按钮在IE中不起作用，在Firefox / Opera / Chrome中很好

2 个答案: