任何人都可以CSS-savy幫我找出WebSVN設置的問題嗎？

當談到CSS時，我是一個全新手，所以我幾乎放棄了自己在這裏找出問題。任何人都可以CSS-savy幫我找出WebSVN設置的問題嗎？

我的問題是我的WebSVN安裝有一個奇怪的問題與查看diff文件有關。有一些CSS可以突出顯示當前行，但是當我在屏幕上上下移動鼠標時，根據移動鼠標的方向，行會更高或更低1-2個像素。

這裏，這是一個有點困難去解釋它，這裏是一個GIF動畫顯示問題：

WebSVN CSS Problem Illustration 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

不幸的是，谷歌Chrome瀏覽器（或者是什麼）似乎打破了上述鏈接的「可點擊性」，所以爲了避免問題，我剛剛發佈了文本中的實際鏈接。您需要登錄，但用戶名和密碼都是「guest」，沒有引號。請注意，您可能會收到有關該網站證書的警告。這是一個私人服務器，所以我不會爲了真正的證書而退出，所以只是忽略它。

在Chrome瀏覽器中，我使用的瀏覽器和Internet Explorer的問題都是可見的。

謝謝，問題與接受的答案解決了，但我的問題也是部分原因：

當你看到，在動畫GIF，或者如果你試了一下，鼠標向上移動，據我所知，CSS該線的懸停風格使該線更高。但是，即使將鼠標光標移動到另一行，一次將鼠標懸停在一行上時，插圖中的底線也不應移動。當然，我所在的路線和我移動的路線應該根據方向進行移位，因爲失去了1-2個像素，另一個路線取得了它們，但是插圖底部的文本行應該不是真的動了，應該嗎？當我將鼠標光標移動到開始的行列表中時，它們應該只向下移動1-2個像素，並且只有當我將它移回時纔會移動。

我只是覺得特別的行爲很奇怪。

來源

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

我可以問你用來生成GIF哪些工具？ – 2009-08-30 17:31:32

Camtasia工作室：http://www.techsmith.com/camtasia.asp – 2009-08-30 17:39:46

嘗試改變：

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-30 17:08:59

不過，我的問題也一定程度之所以出現這種情況，應該至少不只是我在上空盤旋線1-2像素更高，那麼當我離開它時，那條線應該縮小，另一條線會變得更高？我能想到的唯一解釋就是，我看到的是，不管怎樣，上下移動都沒有完全消除該邊界的影響。 – 2009-08-30 17:16:48

@Karlsen，我想我明白了爲什麼，並且在我的答案中寫了這個。 – strager 2009-08-30 17:17:39

請記住，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。然而，當我這樣做時，底部的兩條線應該靜止在屏幕上，但它們不在我的情況下，它們繼續移動，取決於上/下多遠進入了行列表。 – 2009-08-30 17:18:33

好，要解決一個問題，其在將鼠標懸停在樣式邊框的好方法可能是在取消風格，是與背景色相同的引入邊界。也許線高可能需要調整？ – Charlie 2009-08-30 17:23:41

我認爲這個問題是你的邊框不會像你想要的那樣摺疊。

您有一個規則：

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; 
}

這種方式，所以它並沒有與td.diff合併邊境pre沒有得到一個邊界。

來源

2009-08-30 17:16:59 strager

這似乎是工作爲好，但我會離開它，因爲它是現在，沒有邊界，對我來說，看起來更簡潔，以及使雙獎金:)感謝您的回答，但肯定這一定是某種不可預見的組合的CSS，或者某種錯誤，不是？ – 2009-08-30 17:22:44

的問題看起來很喜歡它通過添加額外的灰色邊框的懸停在該元素時引起的。邊界被應用外部元素佔據的主要區域。

簡單的定爲這是設置非徘徊狀態具有相同的顏色作爲背景的邊界，那麼只有改變懸停邊框顏色屬性。

來源

2009-08-30 17:19:07 edeverett

任何人都可以CSS-savy幫我找出WebSVN設置的問題嗎？

回答

相關問題