WebSVNの設定で問題を見つけ出すのにCSSを使いこなせる人はいますか？

CSSについては、初心者ですから、ここで自分自身で問題を理解することをあきらめてしまいました。WebSVNの設定で問題を見つけ出すのにCSSを使いこなせる人はいますか？

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

WebSVN CSS Problem Illustration http://www.vkarlsen.no/files/websvn_css.gif

ここに私websvnのリポジトリに行き、それを自分で試してくださいするには：ここで

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

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、私が使用するブラウザ、Internet Explorerでは、問題が見えます。

おかげで、問題は受け入れ答えで解決が、私の質問は、部分的にも、このでした：あなたはアニメーションGIFで、参照、またはあなたは、マウスを上に移動し、それをしようとした場合、私はCSSを理解すると

ラインのホバースタイルはそのラインをより高くします。ただし、マウスカーソルを別の行に移動しても、図の一番下の行は一度移動すれば1行上に移動してはいけません。私が行っていたラインと私が移動したラインは、1-2ピクセルを失ってもう1つが得られたので方向に応じてシフトするはずですが、イラストの下部にあるテキストラインは彼らはすべきでしょうか？マウスカーソルを行のリストに移動すると、カーソルを1〜2ピクセルだけ下に移動する必要があります。

私はちょうどその特定の動作がかなり奇妙だと思った。

出典

2009-08-30 Lasse Vågsæther Karlsen

gifを生成するためにどのツールを使用したか尋ねますか？ –

Camtasia Studio：http：//www.techsmith.com/camtasia.asp –

は変更してみてください：

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre { 
    background-color:#e8e8e8; 
}

に

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

出典

2009-08-30 17:08:59

しかし、私の疑問も部分的にはこれが起きています。私はそれから離れて移動すると、その線は縮小し、別の線は同様に高くなるでしょうか？私が見た振る舞いで私が考えることができる唯一の説明は、何らかの形で、上下に動いてもその境界線の効果を完全に取り除かなかったということでした。 –

@カールセン、なぜ私は考えていると思うし、私はそれを私の答えに書いた。 – strager

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

出典

2009-08-30 17:15:55 Charlie

はい、私はその部分を理解しています。しかし、私は5行、一時的に2ピクセル上の行を増加するホバースタイルを持っているとしましょう。各行は10,10,10,10,10で始まり、最初の行に移動して12,10,10,10,10になります。次に次の行に移動し、 10、12、10、10、10でなければなりません。しかし、これを行うと、下の2行は画面上に静止しているはずですが、私の場合ではなく、どれくらい上/下行のリストに入った。 –

これは、背景と同じ色の選択解除されたスタイルに境界線を導入することができます。おそらく線の高さはおそらく調整する必要がありますか？ – Charlie

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

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

あなたが期待しているpreのボーダーtd.diffと合併するの国境：

あなたがルールを持っています。私はパディングがブラウザで罫線が崩れないようにするか、preはtableの一部ではないかもしれないと思っています（確かに言えません）。

変更セレクタそれはpre含まれていませんので：それはtd.diffと国境をマージする必要はありませんので、

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

この方法では、preは国境を得ることはありません。

出典

2009-08-30 17:16:59 strager

これはうまくいくようですが、ボーダーなしで今のように残しておきます。私には二重のボーナスもあります:)答えてくれてありがとうございます。しかし確かにこれは予想外の組み合わせですCSSの、またはいくつかの種類のバグ、いいえ？ –

この問題は、要素の上に乗るときに余分な灰色の境界線が追加されたことが原因であると思われます。枠が適用されるのは外側のです。

この単純な修正は、非ホバリング状態を背景と同じ色の境界線に設定し、ホバー上の境界線の色プロパティのみを変更することです。

出典

2009-08-30 17:19:07 edeverett

WebSVNの設定で問題を見つけ出すのにCSSを使いこなせる人はいますか？

答えて

関連する問題