Question

我正在使用复选框和标签来构建手风琴菜单。我有它在andriod设备和大多数浏览器上工作时调整大小但由于某种原因它不适用于桌面或iOS设备上的Safari。上周五它正在工作，现在它不是，即使我找不到任何会发生冲突的事情。这是必要的代码。

HTML

<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;
}

正如我所说的......如果将这些代码调整到正确的媒体查询以及onriod，这段代码在所有浏览器上都没有任何问题。当我将iPhone插入计算机并通过控制台查看时，我可以找到应用CSS的位置（最大高度更改）但在计算部分中它仍显示max-height: 0;

修改

直到今天我才意识到这一点，但这个问题也出现在Safari for Desktop上。最奇怪的部分是我可以在检查器中看到正在应用max-height但是计算仍然显示max-height: 0;但是如果我取消选中max-height然后在检查器中再次检查它，那么样式将被应用

问题可以在voicepad.com.mm-dev.net处在Safari的响应式浏览器大小中看到。

Answer 1

This link指出了我可能回答问题的道路。我的代码“工作”，但由于webkit的一个错误，它在以前的任何webkit浏览器上都不起作用。现在显然这是固定的，但我认为这个bug还在那里。所以我决定尝试跳过相邻的兄弟选择器@Override public View getView(int position, View convertView, final ViewGroup parent) { View view = null; if (convertView == null) { view = inflater.inflate(R.layout.survey_list_item, parent, false); CheckBox checkBox = (CheckBox) view.findViewById(R.id.checkBox1); TextView surveyName = (TextView) view.findViewById(R.id.textView1); TextView surveyClass = (TextView) view.findViewById(R.id.textView2); //What to do here? } else { view = convertView; } return view; }，并使用一般的兄弟选择器+（这是在上周五它在iOS上工作时的情况之间发生的变化，现在它不是' T）。问题（以及我最初切换到相邻选择器的原因）是我在每个页面上都有多个这样的问题。为了解决这个问题，我使用了一个通用选择器和~伪类来确保我只获得列表中的第一个元素。在这种情况下，碰巧有:first-of-type类。

<强> TL;博士

.drawer.

最大高度未在Safari中应用

1 个答案: