Question

整天把头发拉了过来，决定把我的问题拉到互联网上。

我的一个页面元素（"RRP:" label中span .price-label中包含的div .old-price）出于某种原因拒绝在Chrome浏览器中正确定位，但在Firefox和IE浏览器。用Firefox / IE浏览页面然后在Chrome中查看页面时，我的意思应该是相当明显的。

如果有人能为我提供正确定位Chrome标签的解决方案，并且不会破坏网站在其他浏览器中的显示方式，那我将非常感激。

here's an example of an offending page

编辑：没有足够的代表我的upvotes出现，但非常感谢帮助。 Aparna的解决方案是一个完美的解决方案。欢呼声。

Answer 1

使用<br>代码是非常糟糕的做法。首先，在标记为<br>的标签后删除price-label标记，然后尝试以下代码 -

试试这个 -

.price-label
{
  display:block;
  margin-bottom:10px;
}

Answer 2

将您的html更改为以下内容，

<div id="pricing">
        <li class="new-price">
            <div class="old-price" style="background-color: #3b6987; color: white;">
                <span class="price-label" style="text-transform: uppercase; font-size: 13px;">RRP:</span><br>

                <span id="old-price-1528"> £7.56 </span>
            </div>


            <div class="special-price">
                <span class="price-label">Our Price:</span><br>
                <span class="price-excluding-tax">
                    <span class="product-price" id="price-excluding-tax-1528" style="color: #c40000!important;"> £6.00 </span>
                </span>
                <span class="price-including-tax"> </span>
            </div>
        </li>
    </div>

@Aparna有一个很好的观点，但我发布的Html将解决您的问题。

Answer 3

我从HTML中删除了<br>。在CSS中，添加.price-label { display: block; }以避免需要<br>。另外，将line-height的{{1}}从.old-price, .special-price更改为0.6，以防止这些元素崩溃。

元素在chrome中无法正确定位

3 个答案: