0

サンプルウェブサイト

したがって、プロジェクトにマウスオーバーすると、rgba の背景がフェードインし、既存の画像の上にテキストが表示されます。Safari または Firefox でエラーを再現できません。実際、これを毎回同じものに複製することはできません。また、ページを更新しても問題が解決するとは限りません。

これは私のコードの問題ですか、それとも特に Webkit や Chrome に問題があるのでしょうか?

更新 1

もともと、これは RGBA バックグラウンドの問題だと思っていたので、 a を使用して、background: black;何かが変わるかどうかを確認してみました。マウスオーバー時に線がまだ存在しているため、これは機能しませんでした。

更新 2

これは、私が使用しているディスプレイに問題があると考えていました。Retinaディスプレイを搭載した新しいMacbook Proを使用しています。これはまだ問題の原因である可能性がありますが、そうであるとは確信していません。Retina ディスプレイではない別のデバイスで自分自身をテストすることはまだ行っていませんが、線がまだ普及していると言われています。

この画像は次のことに役立ちます。

楽しい画像解説はこちら！

4

2 に答える 2

1

Chrome で問題を再現することはできませんが、スクリーンショットからは拡大されているように見えます。ブラウザーがパーセンテージを四捨五入し、最終的にピクセルが欠落している可能性があります。高さと幅:

.projectItem {
  overflow: hidden;
 }

 .projectItem a {
   display: block;
   position: absolute;
   opacity: 0;
   width: 102%;
   height: 102%;
   background: black;
   color: #F6F8EE;
   background: rgba(0, 0, 0, 0.85);
   border-radius: 5px;
   margin: -1% 0 0 -1%;
 }

また、なぜ と表示されているのかわかりませんtableが、これが問題を悪化させている可能性があります。に変更しblockます。

于 2012-10-16T22:37:55.290 に答える
1

あなたのボックスモデルには、このテクニックが気に入らないところがあります。私は同様のホバー/フェード スクリプトを使用しましたが、(ボックス モデルをジャッキアップするため) 負のマージンを使用したり、最上位レイヤーを最下部より大きくしたりしませんでした。

レンダリングを改善するのに役立ついくつかのことを見つけました（線は見えませんでしたが、丸みを帯びた白い角がピークを迎えているか、親の角に黒いのみの点が見えていました）。とにかく、ここにいくつかのことがあります：

  1. -1% 0 0 -1% のマージンを削除します (幅を 102% にしてから -1% のマージンを使用すると、私には 100% のように見えますが、すべてのブラウザーが同じ計算をレンダリングすることに依存しています)。
  2. 親と子を同じ W x H (200px x 410px) に設定します。
  3. 子の半径を 1 px 減らすと、コーナーの奇妙さが隠されました (これもレンダリング エンジンの FWIW だと思います)。それを設定していなくても、仕事をする必要があります。
  4. の CSS 宣言にも追加.projectItem a:hoverして.projectItem a、 でトランジションのみが発生するようにします.projectItem a:hover。

このフィドルは、上記のすべての機能をそれぞれ追加/削除してロールオーバー効果を実行します: http://jsfiddle.net/hd4QM/

HTH。

于 2012-10-23T16:05:39.523 に答える