Question

我想在我的项目中使用内容属性显示图像，它在谷歌浏览器上工作正常，但在Firefox或IE中没有。这是HTML

        <div class="row">
          <div class="col-xs-3 col-sm-1 col-sm-push-2">
            <a href="https://www.facebook.com/...">
                <div class="fb-logo"></div>
            </a>
          </div>
        </div>

这是我的CSS

.fb-logo{
  content: url(/assets/images/fb.png);
    width: 100%;
  display: inline-block;
  max-width: 36px;
  margin-top: 2%;
  cursor: pointer;
}

.fb-logo:after{
  content: url(/assets/images/fb.png);
    width: 100%;
  display: inline-block;
  max-width: 36px;
  margin-top: 2%;
  cursor: pointer;
}

请帮助我找到解决方案。

Answer 1

我调整了你的css并在chrome，firefox和IE中进行了测试，所有这些都按预期工作。

.fb-logo::before{
  content: "";
  display: inline-block;
  width: 100%;
  height: 36px;
  max-width: 36px;
  margin-top: 2%;
  cursor: pointer;
  background: green url("https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png") no-repeat;
  background-size: contain;
}

.fb-logo-image {
  width: 100%;
  max-width: 36px;
  height: auto;
  margin-top: 2%;
}

<div class="row">
          <div class="col-xs-3 col-sm-1 col-sm-push-2">
            <a href="https://www.facebook.com/...">
                <div class="fb-logo"></div>
            </a>
          </div>
        </div>
        
        
        <div class="row">
          <div class="col-xs-3 col-sm-1 col-sm-push-2">
            <a href="https://www.facebook.com/...">
                <img class="fb-logo-image" src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" />
            </a>
          </div>
        </div>

我已经更新了我的答案，所以图标的最大宽度为36px。我已经包含了另一种使用img标签的方法，因为你的徽标是内容，所以它更好，语义更正。

内容属性在Firefox和IE中不起作用

1 个答案: