Question

我有以下css：

 #logo{
    content: url(../images/logo.svg) 0 0 no-repeat;
    background-color: black;
    margin-top: 30px;
    height: 20px;
    width: 100px;
  }
  #logo-container{
    background-color: black;
    margin-top: 0px;
    height: 65px;
    width: 100px;
  }

用那个html：

<div class="col-md-1 col-md-offset-1 col-xs-3 ">
                <div id="logo-container"><a id="logo" href="#firstpage" data-target="start" title="EPIC Companies"></a></div>  
            </div>

Chrome正确显示徽标，而Firefox则显示黑色矩形（仅显示容器）。我做错了什么？

Answer 1

Firefox对content属性的支持有限，具体而言，它不能与图片一起使用。

您可能必须使用<img>标记。

编辑：根据链接的重复问题，如果您将其与:before和:after伪属性一起使用，它看起来确实可以在Firefox中使用。

Answer 2

content只能用于:after或:before等伪元素。

所以这样使用它：

#logo:after {
    content: url(../images/logo.svg) 0 0 no-repeat;
    background-color: black;
    margin-top: 30px;
    height: 20px;
    width: 100px;
}

Firefox不会显示徽标

2 个答案: