4

注: このコードの目的に焦点を合わせないでください。発生した問題を強調するための最小限の例にすぎません。

このプロパティを使用しているbox-shadowと、要素とその影の間に 1 ピクセル (またはそれ以下) の余白が生じて、要素の側面に収まらないことがあります。これは、問題を提起するために使用する例ですtransform（これが唯一の方法ではないと思います）：

h1 {
  width: 100px;
  text-align: center;
  margin: 25px 55px;
  background: black;
  box-shadow: 30px 0 0 black, -30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 0); 
}
h1 a {
  color: white;
  text-decoration: none;
}
<h1><a href="#">Foo</a></h1>

何も表示されない場合は、フルスクリーンのスニペットを見て、ブラウザーのサイズを変更してみてください (Chrome と Firefox で問題が発生しました)。以下は、私が作成したいくつかのスクリーンショットと（明らかな）期待される結果を含む写真です。

ここに画像の説明を入力

誰もこの問題に直面しましたか?
ブラウザのように見えますが、これらのマージンを回避する回避策を見つけることはできますか?

編集

私は何か新しいことを発見しました: 片面にボックスの影を設定すると、Chrome を使用してギャップは発生しません (Firefox ではまだここにあります):

h1 {
  width: 100px;
  text-align: center;
  margin: 25px 55px;
  background: black;
  box-shadow: 30px 0 0 black, -30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 20px); 
}
h1 a {
  color: white;
  text-decoration: none;
}
h1:nth-child(2) {
  box-shadow: 30px 0 0 black;    
}
h1:nth-child(3) {
  box-shadow: -30px 0 0 black;    
}
<h1><a href="#">Foo</a></h1>
<h1><a href="#">Foo</a></h1>
<h1><a href="#">Foo</a></h1>

ここに画像の説明を入力

4

2 に答える 2

0

Chrome バージョン 42.0.2311.90 m の使用

ブラウザーの解像度が (約 25% から 500% に) 変化し
、y 軸の移動が 0 または 0px
の場合、ギャップが発生します。コード例:

    transform: translate(0.5px, 0); 
    transform: translate(0.5px, 0px); 
    transform: translate(7px, 0); 
    transform: translate(7px, 0px);

zessxのEDITを使用して、出力に3つの例を表示すると、彼が行ったのと同じ結果が得られました

    transform: translate(0.5px, 20px);

しかし、どちらかの軸の「px」を1つ削除すると、ギャップはありませんでした。例:

    transform: translate(0.5px, 20);
    transform: translate(0.5px, 1);
    transform: translate(0.5, 20px); 
    transform: translate(0, 20px);

zessxで述べられているように、Chrome で解像度が変更されると、両側のシャドー ボックスに対してのみギャップが移動します (L から R へ) 。

于 2015-04-14T09:34:59.147 に答える
0

この CSS は次のように機能します。

h1 {
  width: 100px;
  text-align: center;
  margin: 0px;
  background: green;
  box-shadow: 30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 0); 
}
h1 a {
  color: white;
  text-decoration: none;
}

ここにFiddleがあります。使用していた色 (黒地に黒) によって、見たわずかな違いが生じました。色を変えるとそれができます。

于 2015-04-09T17:17:21.427 に答える