Chrome剪切了文字

Question

此图片是地址http://www.rothemcollection.com/engagement-rings/的屏幕截图。 谷歌Chrome浏览器削减了'推荐'的''''。我试图改变z-index，用顶部或margin-top向下移动它，它仍然让我到最后。 有没有人有想法？它可能与我使用特殊字体的穷人有关？如果是这样，我该怎么办？

Answer 1

试试这个css：

#mainSlider h1 span.big {
    font-size: 60px;
    line-height: 63px;
    display: inline-block;
    width: 484px;
    position: relative;
}

Answer 2

定义 mainSlider标题 position:relative;或定义z-index:1;

就像这样

#mainSlider h1{
position:relative;
z-index:1;
}

结果

Answer 3

存在问题，很可能它与不透明度和css引擎渲染有关，假设是因为一些优化。我会建议更多左边的标题为6像素，以避免图像重叠，就像这样。

#mainSlider h1 {
   left: -6px;
   position: relative;
   ...

Answer 4

有几种方法可以做到这一点 - 我会将我的观点添加到组合中。尝试将z-index:-1;添加到.ring课程。如果您想在某个时刻制作图像链接，这将产生问题，但应该在您当前的设置中工作。

#mainSlider .ring{
  position: absolute;
  right: 0;
  z-index:-1;
}

Answer 5

我将文字大小缩小了一个像素，问题就解决了。 不是次优的解决方案，但仍然有效。不幸的是，解决方案没有帮助。 谢谢大家。