Chrome 剪切文本

Question

这张图片是地址http://www.rothemcollection.com/engagement-rings/的截图。 Google Chrome 浏览器剪切的“建议”中的“s”。 我尝试更改 z-index，将其与顶部或边距顶部一起向下移动，但它仍然将我切到最后。 有没有人有想法？ 会不会和我用的特殊字体差有关？ 如果是这样，我该怎么办？

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

我将文本大小减少了一个像素，问题解决了。 不是次优解决方案，但仍然有效。 不幸的是，这些解决方案没有帮助。 谢谢你们。