代码之家 › 专栏 › 技术社区 › Patrick Kenny

pseudoelement可以在Firefox中使用,但不能在Chrome中使用,为什么?

css

Patrick Kenny · 技术社区 · 6 年前

我正在尝试使用伪元素来替换 <li> <ul> this tutorial.

问题是,我的CSS在Firefox中工作,但在Windows上不能运行Chrome。

这是我的CSS:

article ul {
  list-style: none;
}
article ul > li::before {
  font-family: FontAwesome;
  content: "\f0da";
  color: $darkbrown;
  display: inline-block;
  width: 1em;
  margin-left: -1em
}

我的目标是因为我有 <ul> 在我不想应用三角形的页眉和页脚中。

在Firefox中,这与预期一样有效( <ul> 在文章中有三角形,和 <ol> 在文章中显示数字)。然而,在Chrome中 <ul> <ol> 文中也有三角形。

下面是一个HTML的例子(对不起,它来自Drupal,有点难看;我尽我所能把它清理干净了

<body class="path-node page-node-type-lp navbar-is-static-top has-glyphicons">
<a href="#main-content" class="visually-hidden focusable skip-link">
    ã¡ã¤ã³ã³ã³ãã³ãã«ç§»å
</a>
<div role="main" class="main-container container js-quickedit-main-content">
    <div class="row">

        <div class="col-sm-12" role="heading">

            <section class="col-sm-12">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10 col-xs-12">


                        <a id="main-content"></a>
                        <div class="region region-content">
                            <article role="article" about="/myurl" class="lp full clearfix">
                                <div class="content">
                                    <div class="layout layout--onecol">
                                        <div class="layout__region layout__region--content">
                                            <section
                                                    class="block block-layout-builder block-field-blocknodelpbody clearfix">
                                                <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
                                                    <ol>
                                                        <li>item 1</li>
                                                        <li>item 2</li>
                                                        <li>item 3</li>
                                                    </ol>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
</body>

2 回复 | 直到 6 年前

D. Stevens 6 年前

我不确定我是否理解您的问题,因为您的代码似乎按您的意愿工作。我添加了一个 <ul> <article> 显示它旁边有一个三角形,而 <ol> 显示默认编号。尝试在Chrome中浏览此示例以查看结果。

article ul {
  list-style: none;
}

article ul>li::before {
  font-family: FontAwesome;
  content: "\f0da";
  color: red;
  display: inline-block;
  width: 1em;
  margin-left: -1em
}

<a href="#main-content" class="visually-hidden focusable skip-link">
    ã¡ã¤ã³ã³ã³ãã³ãã«ç§»å
</a>
<div role="main" class="main-container container js-quickedit-main-content">
  <div class="row">

    <div class="col-sm-12" role="heading">

      <section class="col-sm-12">
        <div class="row">
          <div class="col-md-1"></div>
          <div class="col-md-10 col-xs-12">


            <a id="main-content"></a>
            <div class="region region-content">
              <article role="article" about="/myurl" class="lp full clearfix">
                <div class="content">
                  <div class="layout layout--onecol">
                    <div class="layout__region layout__region--content">
                      <section class="block block-layout-builder block-field-blocknodelpbody clearfix">
                        <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
                          <ol>
                            <li>item 1</li>
                            <li>item 2</li>
                            <li>item 3</li>
                          </ol>
                          <ul>
                            <li>item 1</li>
                            <li>item 2</li>
                            <li>item 3</li>
                          </ul>
                        </div>
                      </section>
                    </div>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Patrick Kenny 6 年前

我最终发现了这个问题,它与使用Drupal CriticalCSS模块内联关键css有关。

基本上,所发生的是,我已经生成了基于旧CSS的关键CSS,这个内联CSS(关键CSS)覆盖了我正在编辑的文件中的工作CSS。

经验教训: (我现在正在寻找实现自动化的方法。)