Safari瀏覽器的Flex項目不需要100％的寬度CSS

我有這些性能Safari瀏覽器的Flex項目不需要100％的寬度CSS

.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中相互之間的元素它的孩子表現爲你所期望的，即空間：

在Safari 10.1 .2，每個孩子佔據整個寬度，因此它們出現在彼此之下

我需要做些什麼來修復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>

CSS對兒童：

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

來源

2017-09-11 Roberto Graham

有沒有應用到子元素的任何CSS？如果我們能看到你的HTML，它也會有所幫助。 – Blazemonger

@Blazemonger新增 –

這是關係到在Safari中FlexBug其中一些元素無法成爲柔性父母（見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>

來源

2017-09-11 19:51:24 kball

現在很好用，謝謝。 Safari很麻煩 –

Safari瀏覽器的Flex項目不需要100％的寬度CSS

回答

相關問題