Question

我目前正在开发一个WordPress电子商务网站，其中选择的购物平台是WooCommerce。

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

为实现这一目标，我使用了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访问该网站时，只有一个空白区域，其中包括购物车＆＃39;篮子＆＃39;应该。

有任何理由并且有办法解决这个问题吗？

已添加信息：

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

认为我已经看到了这个问题。当我删除visibility: hidden;两个购物车＆＃39;和＆＃39;篮子＆＃39;出现在Internet Explorer中。我只需要展示＆＃39;篮子＆＃39;而不是购物车＆＃39;。

Answer 1

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

我创建了以下目录：

wp-content＆gt;主题＆gt;主题名称＆gt; inc>功能＆gt; woocommerce.php

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

我很久以前创建了这个，所以只是忽略了这个目录。它没有想到，这可能导致问题，特别是因为我的Pseudo CSS在除Internet Explorer之外的所有浏览器中都有效。

最后，我所要做的就是修改原来的购物车＆＃39;在woocommerce.php文件中引用＆＃39;篮子＆＃39;然后删除我创建的CSS（根据我的问题），并解决问题。

经验教训！

仍然不确定为什么Google Chrome会识别我的make shift CSS，而Internet Explorer却没有。

Answer 2

您是否能够使用JavaScript定位元素并更改“innerHTML”？

这将是：

<html>
<span class="icon icon-shopping"></span>
<span class="cart-right">
    <span id="changeCartToBasket">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>    
</html>

<script type="text/javascript">
   document.getElementById("changeCartToBasket").innerHTML = "Basket";
</script>

Answer 3

这似乎与ie

一起工作正常

<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>

<style>
    .remove-shopping-cart {
        position: relative;
        width: 100px;
        height: 20px;
        display: inline-block;
        text-indent: -999999px;
    }

    .remove-shopping-cart:after {
        position: absolute;
        top: 0;
        left: 0;
        content: "Basket";
        line-height: 20px;
        text-indent: 0;
    }
</style>

Answer 4

您可以尝试使用jQuery方法：

$('.remove-shopping-cart').html($('.remove-shopping-cart').html().replace('Shopping cart','Basket'));

比CSS方式做得更好更方便。

$('.remove-shopping-cart').html($('.remove-shopping-cart').html().replace('Shopping cart','Basket'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

如何在Internet Explorer中使用Pseudo CSS替换文本？

4 个答案: