html - Chromeはテキストをカットしました

Question

この画像は、アドレスhttp://www.rothemcollection.com/engagement-rings/のスクリーンショットです。GoogleChromeブラウザによってカットされた「推奨事項」の「s」。z-indexを変更し、topまたは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

テキストサイズを1ピクセル小さくして、問題を解決しました。最適ではないソリューションですが、それでも機能します。残念ながら、解決策は役に立ちませんでした。皆さん、ありがとうございました。