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中使用