chrome在跨度中覆盖动态生成的内容

Question

我有一个magento产品页面，其中具有可变（可配置）价格的产品会更改上面显示的价格并更改标签文本。所以当你加载它给你 ＆＃34;来自：＆＃34; $ lowestprice 然后当你在选择中选择一个不同的选项时，它会更改为上面的那个价格并从＆＃34;中删除：＆＃34;范围内的文字。 如果你再回到＆＃34;选择一个选项＆＃34;在选择＆＃34;来自：＆＃34;再次出现。

关键是在firefox中＆＃34;来自：＆＃34;被移除价格向左移动（一切都是左对齐），这样就没有一个很大的空白区域，其中＆＃34;来自：＆＃34;是...

当你回到默认的选择选项时，

在chrome中，价格会覆盖＆＃34;来自：＆＃34; （见图）

这是html

 <div class="mainprice">
   <div class="price-box">
       <span id="configurable-price-from-1552" class="label">
           <span class="configurable-price-from-label">From: </span>
       </span>
       <span id="product-price-1552" class="regular-price">
            <span class="price">$26.50</span>
       </span>
</div>
</div>

如果我将宽度设置为标签范围，那么当javascript从＆＃34;中删除时，＆＃34;看起来价格有很大的左边距。我也尝试将其设置为表格布局，但单元格在空时不会崩溃。

我真的不想开始破解javascript或更改html的布局。我的问题是，有没有办法用css做这个，并使chrome的表现方式与firefox的方式相同，它只与跨度完美配合。我已经看到了铬的这个问题，在没有指定宽度时表格单元重叠。