我目前在 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">£</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 中。我只需要显示“购物篮”而不是“购物车”。
最佳答案
这个问题,原来是我自己做的。
我创建了以下目录:
wp-content > themes > theme-name > inc > functions > woocommerce.php
woocommerce.php
详细说明了网站标题中包含的一系列功能。
我很久以前就创建了这个目录,所以忽略了这个目录。没想到,这可能是导致问题的原因,尤其是因为我的伪 CSS 在除 Internet Explorer 之外的所有浏览器中都能正常工作。
最后,我所要做的就是在 woocommerce.php
文件中修改原始的“购物车”引用“购物车”,然后删除我创建的 CSS(根据我的问题),问题已解决。
经验教训!
仍然不确定为什么 Google Chrome 可以识别我的临时 CSS,而 Internet Explorer 却不能。
关于css - 如何在 Internet Explorer 中使用伪 CSS 替换文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49097470/