最大高度在Safari中未应用

我正在使用复选框和标签来构建一个accordian菜单。我让它在android设备和大多数浏览器上运行，当它调整大小时，但由于某种原因，它不能在桌面Safari或iOS设备上运行。上周五它还在工作，但现在不行了，尽管我找不到任何会产生冲突的东西。下面是必要的代码:

<input type='checkbox' class='hide' name='custom_tailored' id='custom_tailored' />
<h1 class='dot-bor'><label for='custom_tailored'>Custom Solutions</label></h1>
<ul class='drawer'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

.drawer { display: block; height: auto; max-height: 0; overflow: hidden; transition: all 500ms ease-in-out; /* plus vendor prefixes */ } .hide:checked + .dot-bor + .drawer { max-height: 2500px; }
正如我所说的…这段代码在所有浏览器上都没有任何问题，如果它们调整到合适的媒体查询大小，以及在android上。当我将iPhone连接到电脑并查看控制台时，我可以找到CSS应用的位置(max-height更改)，但在计算部分仍然显示max-height: 0;
编辑:

我直到今天才意识到，但是这个问题在Safari桌面版上也存在。最奇怪的是，我可以在检查器中看到max-height被应用了，但是computed仍然显示max-height: 0;，但是如果我取消选中max-height，然后在检查器中再次选中，突然样式被应用了。

这个问题可以在voicepad.com.mm-dev.net上看到，在safari浏览器的响应大小

这个链接为我指明了解决问题的可能答案。我的代码是"工作"，但由于一个错误与webkit，它不会工作(以前)在任何webkit浏览器。现在显然这是固定的，但我认为这个错误仍然存在。所以我决定尝试跳过相邻的兄弟姐妹选择器+，只是使用一般的兄弟姐妹选择器~(这是上周五它在iOS上工作时发生的变化，现在它不是)。问题(以及我最初切换到相邻选择器的原因)是我在每个页面上都有多个这样的选择器。为了解决这个问题，我使用了一个通用选择器和:first-of-type伪类，以确保我只得到列表中的第一个元素。在本例中，它恰好有.drawer.类。

tl;博士
input.hide:checked ~ label.trigger ~ .drawer:first-of-type, input.hide:checked ~ .dot-bor ~ .drawer:first-of-type { max-height: 2500px !important; }

相关内容

最新更新

热门标签：