Может ли кто-нибудь, разбирающийся в CSS, помочь мне разобраться в проблеме с настройкой WebSVN?

Question

Я абсолютный новичок, когда дело доходит до CSS, поэтому я в значительной степени разочаровался в выяснении проблемы здесь.

Проблема, с которой я столкнулся, заключается в том, что в моей установке WebSVN возникла странная проблема, связанная с просмотром отправленных файлов. Есть некоторый CSS, который выделяет текущую линию, но когда я перемещаю мышь вверх и вниз по экрану, линии становятся на 1-2 пикселя выше или ниже, в зависимости от направления, в котором я двигаю мышь.

Здесь немного сложно попытаться объяснить это, вот анимированный GIF, который показывает проблему:

Иллюстрация проблемы CSS WebSVN 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, которым я пользуюсь, и в Internet Explorer проблема видна.

Спасибо, проблема с принятым ответом решена, но мой вопрос также был частично таким:

Когда вы видите в анимированном GIF-файле или, если вы пытались это сделать, мышь, перемещающуюся вверх, я понимаю, что стиль наведения CSS для линии делает эту линию выше. Тем не менее, нижние линии на рисунке не должны двигаться, когда я наведу курсор на одну строку, даже если я переместил курсор мыши на другую строку. Конечно, линия, на которой я находился, и линия, на которую я переместился, должны сместиться в зависимости от направления, потому что один потерял 1-2 пикселя, а другой получил их, но текстовые строки внизу иллюстрации должны на самом деле не двигаться, не так ли? Они должны перемещаться вниз на 1-2 пикселя только тогда, когда я перемещаю курсор мыши в список строк, и только если я перемещаю его обратно.

Я просто подумал, что определенное поведение было довольно странным.

Answer 1

Проблема выглядит так, как будто она вызвана добавлением дополнительной серой границы при наведении на элемент. Границы применяются вне основной области, занимаемой элементом.

Простое исправление для этого состоит в том, чтобы установить состояние без наведения в границу того же цвета, что и фон, а затем изменить свойство border-color только при наведении курсора.

Answer 2

Помните, что высота и ширина CSS не включают отступы, границы и поля. Итак, если у меня есть блок, который имеет высоту 10 пикселей, отступ 3 пикселя и границу 1 пиксель, фактическая высота будет 18 пикселей: 10 высот + 6 полных верхних и нижних отступов + 2 верхних и нижних границы.

Answer 3

Я думаю, проблема в том, что ваши границы не разрушаются так, как вы хотите.

У вас есть правило:

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.

Answer 4

Попробуйте изменить:

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