CSS文本颜色在Firefox和Safari之间不同，

Question

我有一个问题，我不明白到底是什么问题，我如何解决它。

我有一个在<h5>和一些子菜单中带有菜单标题的引导带边框。

标题的background-color是#454545，text-color应该是white。

它在火狐上运行得很好，但是对于Safari，text-color似乎和background-color一样。如果我改变文字颜色，只有象形文字颜色会改变.

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

我找到了基于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

Answer 2

在我看来，你的选择器没有击中你的目标，因为h5在li下面。

因此，您需要这样做来选择标题(我已经将> li添加到选择器中)

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

对于我来说，在Firefox、Chrome和Safari中，这似乎也是一样的。

在其他地方，象形文字可能有自己的规则，以给出适当的颜色。