Internet Explorer CSS问题：滑块存在问题

Question

我正在使用从sooperthemes购买的Lumi主题（他们似乎已经不再营业）用于Drupal。它在除Internet Explorer（我拥有的所有版本，包括10、11和8）之外都运行良好。

基本上，第一张幻灯片部分可见于右侧。其余的幻灯片都无法看到。

我已经搜索并尝试了所有建议的解决方法，但没有任何作用。据我所知，问题似乎出现在style.css中。我在下面包含了我认为相关的部分。有什么提示或想法吗？

/**
 * Featured
 */
.wrap-featured {
  width: 100%;
  overflow: hidden;
  margin-top: -12px;
}

.region-featured {
  position: relative;
}
.region-featured .block {
  padding-top: 0;
  padding-bottom: 0;
}
.region-featured:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .region-featured {
  height: 1%;
}
*:first-child + html .region-featured {
  min-height: 1%;
}
.region-featured h1 {
  font-size: 72px;
  line-height: 1.4em;
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
}
.region-featured p {
  font-size: 24px;
  line-height: 1.4em;
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
}
@media screen and (max-width:768px) {
  .region-featured h1 {
    font-size: 48px;
    line-height: 1.4em;
  }
  .region-featured p {
    font-size: 18px;
    line-height: 1.4em;
  }
}
.region-featured .flex-viewport {
   overflow: visible!important;
   }
.region-featured .slides {
  height: 263px;
  list-style: none;
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
}
.region-featured .slides h1, .region-featured .slides h2, .region-featured .slides h3, .region-featured .slides h4, .region-featured .slides h5, .region-featured .slides h6,
.region-featured .slides p, .region-featured .slides ul, .region-featured .slides ol, .region-featured .slides blockquote {
  margin: 15px 0;
}
.region-featured .slides img {
  margin: 30px 0 0 0;
}
.region-featured .slides h1, .region-featured .slides h2 {
  margin: 30px 0 15px 0;
}
.region-featured .slides *[class|="col"] {
  margin-bottom: 0;
}
.region-featured .slides > li {
  -moz-transition-property: opacity;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.region-featured .slides > li.flex-active-slide {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.flex-control-nav {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}
.flex-control-nav li {
  display: inline;
}
.flex-control-nav li a {
  display: inline-block;
  text-indent: -999999px;
  overflow: hidden;
  width: 18px;
  height: 18px;
  background: url("../images/slider-nav.png") no-repeat center center;
  cursor: pointer;
}
.flex-control-nav li a.flex-active {
  background-image: url("../images/slider-nav-active.png");
}
@media screen and (max-width:640px) {
  .flex-control-nav {
    display: none;
  }
}

/**

- thirddawg

---

你能否发布一个 Fiddle 代码的链接吗？ - man

http://jsfiddle.net/#&togetherjs=yefgAwcmyu - thirddawg

如果需要的话，这是整个style.css。http://jsfiddle.net/thirddawg/WThR6/#&togetherjs=yefgAwcmyu - thirddawg

@thirddawg，你能提供受影响的域名/页面链接吗？ - Sampson

@thirddawg，您需要将网站恢复在线状态，或将其放置在特定的测试环境中。否则，我们无法提供帮助。此外，为了完善您对旧版IE版本的访问，可以查看http://browserstack.com，或从http://modern.ie下载免费虚拟机。 - Sampson

Answer 1

你的问题没有简单的解决方法。如果你查看DOM中发生的事情（右键点击，检查元素，找到ul class="slides"元素），你会在Chrome中看到它应用了以下内联样式：

-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform: translate3d(-1050px, 0, 0);

在动画期间，会将-1050px的倍数替换为X参数，由于transition定义的原因，导致实际滚动逐渐发生。在IE10和11中，什么也不会发生，只会静态切换幻灯片，在“空格页”之后呈现在右侧，因为其等效的CSS规则根本没有被应用。如果您手动添加：

transition:0.6s;
transform:translateX(-1050px);

如果在IE开发工具中没有前缀，您将看到它按预期正常工作。

真正的问题在于，根据版权声明，您的滑块是在2012年编写的，并且很可能在此之前相当长一段时间内，当时IE9及之前根本不支持任何过渡效果，因此迫使开发人员使用基于JavaScript的CSS动画重新创建该效果，而由于普遍存在的错误编码或依赖于条件注释，同时禁用了任何版本的IE的常规代码，导致两者都无法执行，这才是真正的问题所在。

要真正解决这个问题，您需要修改代码以生成与Webkit（和可能的-moz）相同的未加前缀的transition和transform规则——自IE10以来，IE支持它们所有，并且可以说甚至比其竞争对手更好。除了指出问题外，我无法帮助您修复它，因为我发现代码部分已压缩，几乎不可能理解代码并应用指定的更改。如果您可以访问未压缩的源代码，则应聘请专业JS开发人员进行修补，但更好的选择是追踪原始作者并要求他进行修复。否则，恐怕您在这里没有什么运气。

唯一解决它的方法是应用一个元标记，强制IE以IE9兼容模式呈现，这实际上应该很好地工作。然而，从定义上讲，这是一个定时解决方案——当IE20到来时，或者如果你不幸的话，更早，微软不太可能继续提供其所有过时的渲染引擎。所需的标记如下：

<meta http-equiv="X-UA-Compatible" content="IE=9">

将其添加到您的头部，滚动条应该可以正常工作...目前而言。

简短总结: 您购买了一个过时的有缺陷的主题。让作者修复它。IE正在按照您购买的代码指示的方式工作，这些代码由于其作者无法维护而变得难以维护。您可以使用上述解决方法使其暂时工作，但没有人知道它能持续多久-可能是2年，也可能是20年。

- Niels Keurentjes