css - 如何在 Internet Explorer 中使用伪 CSS 替换文本？

Question

我目前在 WordPress 电子商务网站上工作，我选择的购物平台是 WooCommerce。

在标题中，我有一个“购物车”区域，访问者可以在其中选择文本并查看“购物车”中的内容。我想删除“购物车”并将此文本条目替换为“购物篮”。

为此，我使用了 CSS。

这是我的代码:

标记:

<span class="icon icon-shopping"></span>
    <span class="cart-right">
        <span class="remove-shopping-cart">Shopping cart</span>
            <span class="quantity-items">
                0 items - <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>0.00</span>                            
            </span>
    </span>

CSS:

/*Removes Shopping Cart*/
.remove-shopping-cart {
    visibility: hidden;
    position: relative;
}
/*Replace Shopping Cart with 'Shopping Basket.'*/
.remove-shopping-cart:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Basket";
}

以上代码在 Google Chrome 中运行良好。当我使用 Internet Explorer 访问该网站时，“购物车”/“购物篮”所在的位置只有一个空白区域。

这有什么原因吗？有没有办法解决这个问题？

补充信息:

进一步检查后，使用 Internet Explorer，我注意到我的伪 CSS 在 Internet Explorer 中被划掉/取消选择，这与 Google Chrome 不同。我假设这是问题所在。 Internet Explorer 对待 Psuedo CSS 的方式是否不同于 Google Chrome 对待此类 CSS 的方式？

我想我已经看到了这个问题。当我删除 visibility: hidden; 时，“购物车”和“购物篮”都会出现在 Internet Explorer 中。我只需要显示“购物篮”而不是“购物车”。

Answer 1

这个问题，原来是我自己做的。

我创建了以下目录:

wp-content > themes > theme-name > inc > functions > woocommerce.php

woocommerce.php 详细说明了网站标题中包含的一系列功能。

我很久以前就创建了这个目录，所以忽略了这个目录。没想到，这可能是导致问题的原因，尤其是因为我的伪 CSS 在除 Internet Explorer 之外的所有浏览器中都能正常工作。

最后，我所要做的就是在 woocommerce.php 文件中修改原始的“购物车”引用“购物车”，然后删除我创建的 CSS(根据我的问题)，问题已解决。

经验教训!

仍然不确定为什么 Google Chrome 可以识别我的临时 CSS，而 Internet Explorer 却不能。