Firefox和＆之间的CSS文本颜色不同Safari浏览器，

Question

我遇到了问题，我不明白问题究竟是什么，以及如何解决问题。

我有一个带有<h5>菜单标题的 Bootstrap边栏和一些子菜单。

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

它与 Firefox 完美搭配，但 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

我觉得你的选择器缺少你的目标，因为h5位于li之下。

所以你需要这样做才能选择标题（我已将> li添加到选择器中）

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

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

glyphicon可能在其他地方有自己的规则，以提供正确的颜色。

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