Question

我的转换：translateX（calc（））在Safari，Chrome和Firefox中运行良好，但在IE 11中运行不正常。我的代码实际上找不到任何问题。你能告诉我问题出在哪里吗？我的指标通过点击事件从第1项移动到最后一项。

<div class="divWrapper">
  <div class="item-indicator move"></div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
         .
         .
         .
 <div class="item">8</div>
</div>

.item-indicator {
  position: absolute;
  background-color: #000;
  border-color: #000;
  opacity: 0;
  transition: opacity .25s;
  -webkit-transition: opacity .25s;
  right: 100%;
}

.move {
  -webkit-transition: -webkit-transform .25s;
  transition: -webkit-transform .25s;
  transition: transform .25s;
  transition: transform .25s, -webkit-transform .25s;
}

.divWrapper [data-position]{
 opacity: 1;
 right: auto;
}

.divWrapper [data-position='1']{
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0px); 
  transform: translateX(0); 
}

.divWrapper [data-position='2']{
  -webkit-transform: translateX(calc(100% + 4px));
  -ms-transform: translateX(calc(100% + 4px));
  transform: translateX(calc(100% + 4px));
}

.divWrapper [data-position='3']{
  -webkit-transform: translateX(calc(200% + 9px));
  -ms-transform: translateX(calc(200% + 9px));
      transform: translateX(calc(200% + 9px));
}

Answer 1

我发现了一个关于这个问题的类似问题。 See here

以下似乎可行：

transform: translateX(100%) translateX(4px);

IE11中的变换里面的calc（）bug

1 个答案: