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

我將文本大小減少了一個像素，問題解決了。 不是次優解決方案，但仍然有效。 不幸的是，這些解決方案沒有幫助。 謝謝你們。