Question

我使用HTML5显示和摘要元素。我使用自定义标记作为:: before伪元素。摘要元素最多可包含2个span元素。

我已将display：flex（或display：inline-flex）规则应用于摘要元素。

FF和chrome完全按照预期渲染摘要元素 - 一行，我可以用flex控制伪元素和span元素的宽度。

但是，当在我的iPad或iPhone上查看时，摘要元素会被渲染为好像是块或flex-direction：列。伪元素和每个跨度都被渲染到一个新行上。

我有非常类似的代码应用于具有相同span元素但具有空伪元素的div。 iOS在此实例中按预期呈现（flex-direction：row）。

我不清楚是什么导致了这种行为，而且我很难调试，因为我还没有开发的iOS设备。

<details>
 <summary>
  <span>content</span>
  <span>content</span>
 </summary>
</details>

SCSS

我使用mixins和所有供应商前缀。我不会把它弄得那些混乱！

details {
 display: flex;
 flex-direction: column;
 &[open] > summary::before {
  content: '\e313';
 }
}

summary {
 display: flex; //or could be inline-flex
 flex-direction: row; //not strictly needed since this is the default
 &::before {
  content: '\315';
  flex: 0 0 $MARGIN;
  cursor: pointer;
 }
}

以下在iOS中正确呈现

div {
 display: flex; 
 flex-direction: row; 
 &::before {
  content: '';
  flex: 0 0 $MARGIN;
  cursor: pointer;
 }
}

输出 FF＆amp; chrome（将详细信息/摘要呈现为一行）

标记内容内容

iOS（将详细信息/摘要呈现为列）

标记

含量

Answer 1

我决定解决问题而不是继续查看是否有解决方案。我没有在摘要元素上使用display：flex，而是切换到显示：跨度上的内联块。

使用

检测到iOS

FileInputStream file =new FileInputStream(FilePath);
    try(XSSFWorkbook workbook = new XSSFWorkbook(file))
        {
    //code to get data from excel sheet 
    }
    catch(Exception e)
        {
            e.printStackTrace();
        }

鉴于我不能依赖flex，我必须使用大量的媒体查询来确保合理的渲染。内联块跨度元素必须提前计算其宽度。

最后，flex保留在div上（这些反映了摘要元素，但没有任何女儿）。

如果我得到一个更令人满意的解决方案，我会在这里更新。

iOS渲染显示错误：flex？

1 个答案: