css - Internet Explorer css slider 问题

Question

我正在为 Drupal 使用从 sooperthemes(他们似乎不再营业)购买的 Lumi 主题。除了在 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;
  }
}

/**

Answer 1

您的问题没有简单的解决方法。如果您查看 DOM 中发生的事情(右键单击，Inspect Element，找到 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 开发工具中没有前缀，您会看到它按预期正常工作。

这里真正的问题是，根据版权声明，您的 slider 是在 2012 年编写的，很可能在那之前 IE9 and before didn't support any transitions at all ，因此迫使开发人员使用基于 Javascript 的 CSS 动画重新创建效果，由于 未知 原因在 IE10 及更高版本中停止工作，很可能是一般的错误编码，或者依赖于条件注释，而另一方面为 任何 版本的 IE 禁用常规代码，导致两者都不执行。

要真正解决这个问题，您必须修改代码以生成与它相同的transition 和transform(无前缀)规则为 Webkit 做(可能还有 -moz)- IE 自 IE10 以来就支持它们，甚至可以说比它的竞争对手更好。除了指出问题之外，我无法帮助您解决这个问题，因为我看到代码被部分压缩，几乎不可能理解代码并应用定向更改。如果你可以访问未压缩的源代码，你应该聘请专业的 JS 开发人员来修补它，但更好的办法是找到原作者并让他修复它。否则恐怕你在这里运气不好。

修复它的唯一其他方法是应用元标记强制 IE 在 IE9 兼容模式下呈现，这实际上应该可以正常工作。但是，从定义上讲，这是一个时过境迁的解决方案——微软不太可能在 IE20 到来时继续提供其所有过时的渲染引擎，或者如果你不走运的话会更早。所需的标记是:

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

将它添加到您的页眉中，滚动条应该可以正常工作……目前。

tl&dr:您购买了一个有问题的过时主题。求作者修复。 IE 的工作方式与您购买的代码所指示的完全一致，但其作者已使其无法维护。您现在可以使用上面的解决方法让它工作，但没有人知道它会持续工作多久 - 可能是 2 年，也可能是 20 年。