0

私はCSSに関してはまったくの初心者なので、ここで自分で問題を理解することをほとんど諦めています。

私が抱えている問題は、WebSVNのインストールにdiffedファイルの表示に関連する奇妙な問題があることです。現在の線を強調表示するCSSがいくつかありますが、画面上でマウスを上下に動かすと、マウスを動かす方向に応じて、線が1〜2ピクセル上または下になります。

ここで、それを説明しようとするのは少し難しいです、これは問題を示すアニメーションGIFです：

WebSVNCSS問題の図http://www.vkarlsen.no/files/websvn_css.gif

自分で試してみるには、ここにある私のWebSVNリポジトリにアクセスしてください。 

http://vkarlsen.serveftp.com:81/websvn/diff.php?path=/LVK_3_5/branches/controller_designer/LVK.Core/Reflection/TypeHelper.cs&rev=667&sc=1&repname=LVK

残念ながら、Google Chrome（またはその他）は上記のリンクの「クリック可能性」を壊しているようです。問題を回避するために、実際のリンクをテキストで投稿しました。ログインする必要がありますが、ユーザー名とパスワードはどちらも引用符なしの「ゲスト」です。サイトの証明書に関する警告が表示される可能性があることに注意してください。これはプライベートサーバーなので、実際の証明書を取得するつもりはないので、無視してください。

私が使用しているブラウザであるChromeとInternetExplorerでは、問題が明らかになっています。

おかげで、受け入れられた答えで問題は解決しましたが、私の質問も部分的にこれでした：

アニメーションGIFで、または試してみると、マウスが上に移動しているのを見ると、その線のCSSホバースタイルによってその線が高くなっていることがわかります。ただし、マウスカーソルを別の行に移動しても、1つの行にカーソルを合わせると、図の一番下の行は移動しません。確かに、1つは1〜2ピクセルを失い、もう1つはそれらを獲得したため、私がいた線と移動した線は方向に応じてシフトするはずですが、図の下部にあるテキスト行は本当に動かないでしょ？最初にマウスカーソルを行のリストに移動したとき、および元に戻した場合にのみ、1〜2ピクセル下に移動する必要があります。

特定の振る舞いはかなり奇妙だと思っただけです。

4

4 に答える 4

1

変更してみてください：

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
  background-color:#e8e8e8;
  border:1px solid #cccccc;
}

の中へ

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
  background-color:#e8e8e8;
}
于 2009-08-30T17:08:59.977 に答える
1

CSSの高さと幅には、パディング、境界線、マージンは含まれていません。したがって、高さが10ピクセル、パディングが3ピクセル、境界線が1ピクセルのボックスがある場合、実際の高さは18ピクセルになります。10の高さ+合計6つのパディングの上下+2つの境界線の上下です。

于 2009-08-30T17:15:55.297 に答える
1

問題は、あなたが望むようにあなたの国境が崩壊していないことだと思います。

ルールがあります：

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
    background-color: #E8E8E8;
    border: 1px solid #CCCCCC;
}

pre'の境界線が'の境界線とマージされることを期待していますtd.diff。パディングにより、ブラウザで境界線が折りたたまれないようになると思います。または、それが（どちらかはわかりpreませんが）の一部ではない可能性がtableあります。

preセレクターを変更して、 ：が含まれないようにします。

tbody tr:hover td.diff {
    background-color: #E8E8E8;
    border: 1px solid #CCCCCC;
}

このように、preは境界線を取得しないため、境界線を。とマージする必要はありませんtd.diff。

于 2009-08-30T17:16:59.540 に答える
1

この問題は、要素の上にカーソルを置いたときに余分な灰色の境界線が追加されたことが原因のようです。境界線は、要素が占めるメイン領域の外側に適用されます。

これを簡単に修正するには、ホバーしていない状態の境界線を背景と同じ色に設定し、ホバー時にのみ境界線の色のプロパティを変更します。

于 2009-08-30T17:19:07.740 に答える