Internet Explorer css发生滑块问题

2023年2月22日 200次阅读

我正在使用我从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;
  }
}

/**

最佳答案 您的问题没有简单的解决方法.如果您查看DOM中发生的事情(右键单击,检查元素,找到ul class =“slides”元素),您将在Chrome中看到它正在应用以下内联样式：

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

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

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

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

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

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

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

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

将它添加到标题中,滚动条应该可以正常工作……现在.

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

点赞