html - HTML <details>标记在IE/Edge中不起作用

我正在尝试添加用户可以显示和隐藏的其他可切换部分。
我的要求：
主要浏览器支持（Opera、Chrome、Edge、IE11、Firefox、Mac上的Safari）
没有javascript
并且正在考虑使用<details>标记，但是代码

<details>
  <summary>Toggle</summary>
  <p>Hideable</p>
</details>

无法在边缘/ie浏览器上工作。
不管怎样，我能“使”它工作吗，或者还有什么我可以用来完成那个任务的吗？只要不存在javascript，黑客就可以了。

最佳答案

这是建议使用隐藏复选框的:checked方法：

.toggler {
  display: none;
}

.toggler+.toggler-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .4s ease-in-out;
}

.toggler:checked+.toggler-content {
  max-height: 1000px;
  opacity: 1;
}

<div>
  <label for="toggler-id-1">Toggle</label>
  <input type="checkbox" id="toggler-id-1" class="toggler" />
  <div class="toggler-content">Hideable</div>
</div>

我还是更喜欢使用@finesse的解决方案，因为它允许您使用语义正确的html元素。