html - Chrome 剪切了文本

Question

这张图片是地址http://www.rothemcollection.com/engagement-rings/的截图。Google Chrome 浏览器删减了“推荐”的“s”。我试图更改 z-index，将其与顶部或边缘顶部一起向下移动，但它仍然将我拖到最后。有人有想法吗？这可能与我使用特殊字体的差有关？如果是这样，我该怎么办？

Answer 1

有问题，很可能与不透明度和 css 引擎渲染有关，可能是因为一些优化。我建议将标题多向左 6 个像素，以避免图像与其重叠，就像这样。

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

Answer 2

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

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

Answer 3

试试这个CSS：

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

Answer 4

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

像这样

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

结果是

Answer 5

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