3

私は別の非常に奇妙な質問に戻ってきました。

フレーズの最後の文字「k」が親の背景からピクセルの点線を切り取る原因は何ですか? 私には解決策があり、最もエレガントではない可能性があり、他の人にも開かれていますが、なぜこれが起こっているのかに本当に興味があります.

作成中のスクローラーがあります。現在、テキストをスライドさせてアニメーションをテストしています。私はこれを文字でテストしましたが、鋭いエッジはありませんが、問題はありませんが、「T と k」(おそらく他の文字) では背景に食い込んでしまいます。

「T」は上部に同じ効果をもたらしますが、線は背景に非常に近い青です.

Firefox と IE では問題なく動作します。自宅で Mac を使用しているため、よくわかりません。Chrome と Safari では、この問題が発生します。

これがどのように見えるかのイメージです。

文字背景カット

テキストをスライドバックするためにボタンをもう一度切り替えると、背景に切り込まれ、これ1pxが点線または直線の高さのカットのままになります。

ボタンをもう一度クリックして停止するまで戻り、もう一度クリックして実線を切り取ることもできます。

ここにcss、テキストが含まれているものに関連するものがあります。

.text {
   right: 50%;
   text-align: left;
   font-size: 1.5em;
   font-family: "century gothic";
   position: absolute;
   color: #f7f7f7;
   transition: right 3s ease-in;
   -webkit-transition: right 3s ease-in;
   -moz-transition: right 3s ease-in;
}

.text.active {
   right: 2%;
}

.text > li {
   display: inline-block;
}

これは、コードと問題のピークを取るためのJSFIDDLEです。

この問題の解決策はすでにここにあります。

と を使用して、:before両側に空白スペースを作成し、背景に切り込まないようにしました。:afterli

これに関するすべての意見に感謝します！

4

1 に答える 1

1

ほぼ間違いなく表示バグのようです。問題を解決した次の解決策に基づいて、アニメーションのバック中に表示される 内のテキストがわずかに重なり、ゴースト1pxが発生していると思われます。Chrome のインスペクタ ツールでを選択すると、選択範囲が青色で強調表示され、 の重なりも見えると思います。liulli1pxk

それよりも良い説明ができるかどうかはわかりません-liテキストフォントのサイズ変更に関するバグのようです。

ただし、次のすべては、疑似要素よりも問題に対するより洗練された解決策になる場合があります。

#1 追加padding-right: 1px

これは、.text( ul) 要素 ( example ) またはli要素( example ) のいずれかで機能しました。

#2 追加overflow: hidden

これは.text( ul) 要素 ( example ) に対するものです。

#3 透明な右枠を追加する

(必要に応じて)効果を相殺するためにaborder-right: 1px solid transparentを aに配置すると、 ( example ) または( example ) のどちらでも解決されます。margin-right: -1pxulli

#4 を追加margin-right: 1px

これはli( example ) でのみ機能します。

結論

基本的に、元の疑似要素ソリューションと上記を使用すると、その右端にバッファーを与えるものはすべて、バグの発生を防ぐようです。

于 2013-11-15T02:18:52.290 に答える