Firefox和Safari之間的CSS文本顏色不同，

Question

我有一個問題，但我不明白問題到底是什么以及如何解決。

我有一個Bootstrap側邊欄 ，在<h5>帶有菜單標題以及一些子菜單。

標題的background-color為#454545 ， text-color應為white 。

它在Firefox上可以很好地工作，但在Safari上 ， text-color似乎與background-color相同。 如果我更改文本顏色，則僅glyphicon顏色會更改。

HTML

<ul class="list">
  <li style="list-style: none; display: inline">
    <h5><strong><span class="glyphicon glyphicon-file"></span> Actes Etat Civil</strong></h5>
  </li>
  <li>
    <a href="{%%20url">Fiches Identités</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Naissance</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Reconnaissance / Adoption</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Mariage</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Divorce</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Décès</a>
  </li>
</ul>

CSS

.list > h5 {
    color : white;
    padding: 2% 0% 2% 5%;
    background-color: #454545 !important;
    font-size: 25;
}

從Firefox：

從Safari：

Answer 1

在我看來，您的選擇器缺少目標，因為h5在li下方。

因此，您需要執行此操作以選擇標題（我已將> li添加到選擇器中）

.list > li > h5 {
    color : white;
    padding: 2% 0% 2% 5%;
    background-color: #454545 !important;
    font-size: 25;
}

對於我來說，這似乎在Firefox，Chrome和Safari中的作用相同。

字形圖標可能在其他地方有其自己的規則以賦予適當的顏色。

Answer 2

我發現基於strong參數的解決方案：

.list > h5 > strong {
        color : white;
        padding: 2% 0% 2% 5%;
        font-size: 15px;
    }

    .list > h5 {
        padding: 2% 0% 2% 5%;
        background-color: #454545 ;
    }

似乎可以在Safari和Firefox中使用