Question

我正在使用我从Droalhemes购买的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中发生的事情（右键单击，检查元素，找到ul class="slides"元素），您将在Chrome中看到它正在应用以下内联样式：

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

在动画期间，由于-1050px定义，transition的倍数被替换为X参数以引起实际滚动。在IE10和11中没有任何反应，只是幻灯片静态切换，导致它们在'spacer page'后面的右侧呈现，因为它的等效CSS规则根本没有被应用。如果您手动添加：

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

在IE开发工具中没有前缀，你会发现它按预期工作正常。

要真正修复此问题，您必须修改代码以生成与Webkit相同的transition和transform（无前缀）规则（可能-moz） - 自IE10以来，IE支持它们，可以说比竞争对手更好。我无法帮助你解决这个问题，因为我看到代码被部分压缩，几乎不可能理解代码并应用定向更改。如果您可以访问未压缩的源代码，您应该聘请专业的JS开发人员来修补它，但更好的选择是追踪原作者并要求他修复它。否则我担心你在这里运气不好。

修复它的唯一方法是通过应用元标记强制IE在IE9兼容模式下呈现，这实际上应该可以正常工作。然而，根据定义，这是一个定时轰炸的解决方案 - 当IE20到来时，微软不太可能继续运送所有过时的渲染引擎，或者如果你运气不好，那么就更快。必需的标签是：

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

将它添加到标题中，滚动条应该正常工作......暂时。

tl＆amp; dr：你买了一个过时的过时主题。让作者修复它。 IE正在按照您所购买的代码告知其作者无法维护的工作。你现在可以通过上面的解决方法使它工作，但没有人知道它将继续工作多长时间 - 可能是2年，可能是20年。

Internet Explorer css发生滑块问题

1 个答案: