gpt4 book ai didi

html - Safari Flex 元素不需要的 100% 宽度 CSS

转载 作者:行者123 更新时间:2023-11-27 23:10:45 25 4
gpt4 key购买 nike

我有一个具有这些属性的元素

.Task-header {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

在 Chrome 中,子项的行为与您预期的一样,即彼此之间有空间: Chrome

在 Safari 10.1.2 中,每个 child 占据整个宽度,因此它们出现在彼此下方 Safari

我需要做什么来修复 Safari 浏览器?

编辑:这是 JSX:

<details>
<summary className="Task-header">
<h3 className="Task-header-title">{data.Name + " [" + version + "]"}</h3>
<span className={"mdi mdi-18px " + (data.Status.State === "running" ? "mdi-checkbox-marked-circle" : "mdi-close-circle")}/>
</summary>
<h3>{data.Name + " [" + version + "]"}</h3><span></span>
<div className="Task-body">
<p>CPU %: <b>{data.cpuUsage}</b></p>
<p>Mem Usage/Limit: <b>{data.memoryUsage}/{data.memoryLimit}</b></p>
<p>Mem %: <b>{data.memoryPercent}</b></p>
<p>Block I/O: <b>{data.blockRead}/{data.blockWrite}</b></p>
<p>Net I/O: <b>{data.netRead}/{data.netWrite}</b></p>
<p>{dateString}</p>
</div>
</details>

关于 child 的 CSS:

.Task-header-title {
font: 600 .875rem Averta;
margin: 0;
}

MDI

最佳答案

这与 Safari 中的 FlexBug 有关,其中某些元素无法成为 flex 父元素(请参阅 https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers)。摘要标签似乎是这些元素之一。

您可以通过在摘要下嵌套一个 div 来解决这个问题,如下所示:

<summary >
<div className="Task-header">
<h3 className="Task-header-title">{data.Name + " [" + version + "]"}</h3>
<span className={"mdi mdi-18px " + (data.Status.State === "running" ? "mdi-checkbox-marked-circle" : "mdi-close-circle")}/>
</div>
</summary>

关于html - Safari Flex 元素不需要的 100% 宽度 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46156669/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com