Question

我经常发现自己没有CSS问题，但这让我摸不着头脑。

在这个plunk http://plnkr.co/i2Fxol中，所有浏览器都能正常运行，但IE10和11除外，并且Edge完全无法将css转换应用于某些元素，而不是全部。无论我看多少，我都看不出为什么它会在那些特定的地方失败。（这里添加了CSS，但需要在上下文中看到，因为这是一个非常简单的视图）

#navigation ul {
  display: block;
  list-style: none;
  overflow: hidden;
  transition: all .2s ease;
}

基本上，当手风琴打开时，它们会打嗝，菜单可以在0.2秒内展开和收缩。所有其他过渡都有效。

哦，现在有办法让我在HTML5中为svg路径添加闭包只是为了删除IE和Edge中那些毫无意义的警告。

修改

手风琴的初始高度是按照以下方式收集的：

...
var initialHeights = document.getElementsByClassName("level-1");
var values = [];
for(var i = 0; initialHeights.length > i; i++){
  values.push(initialHeights[i].offsetHeight);
}
...

然后将它们与使用以下内容安全存储在数组中的值内联归零：

function toZero(){
  for(i = 0; mainSubMenus.length > i; i++){
    mainSubMenus[i].setAttribute("style", "height:0;");
  }
}
toZero();

这允许使用css在零高度和已知值之间转换。

brainfart

我认为以下可能会治愈病人：

mainSubMenus[i].style.height = 0;

我错了。

Answer 1

我认为这里的问题是缺乏初始高度。如果您在元素上循环，并将其高度设置为等于其计算高度样式的高度，则可以使用折叠样式将高度覆盖为0px，从而触发两个显式数字之间的转换。 / p>

＆＃13;

var box = document.querySelector( ".box" );

// Set the box's initial height to its computed height
box.style.height = window.getComputedStyle( box ).height;

// Hide the box
box.classList.add( "collapsed" );

// Click will toggle a "collapsed" class on the box
document.addEventListener( "click", e => box.classList.toggle( "collapsed" ) )

＆＃13;

.box {
  width: 100px;
  overflow: hidden;
  border: 1px solid #000;
  transition: all .2s ease;
}

.collapsed {
  height: 0!important;
}

＆＃13;

<ul class="box">
  <li>Hello</li>
  <li>World</li>
</ul>

＆＃13;

Edge和IE11中的CSS转换无效

修改

brainfart

1 个答案: