CSS - граница, добавляющая вторую толстую белую линию в Chrome - PullRequest
Новая
       16

CSS - граница, добавляющая вторую толстую белую линию в Chrome

1 голос
/ 03 апреля 2012

Я создал раскрывающееся меню, используя JQuery, но когда я тестирую его в Chrome, меню третьего и нижнего уровня показывают толстую белую линию (по центру элемента списка) в дополнение к границе, которая должна быть добавлена. Это не происходит в других браузерах. Это происходит только тогда, когда я применяю параметр border-top к элементам списка. Это должно быть какая-то ошибка, связанная с CSS в chrome, потому что я не могу понять, что именно, я могу делать неправильно У меня проблема с Google, и я не нашел никого с такой же проблемой.

Взгляните:

JSfiddle

Полный экран

Ответы [ 3 ]

1 голос
/ 03 апреля 2012

Кажется, что между 

.nav ul ul li:first-child{
    border-top:solid 1px white;

и 

.nav ul li{
    border-bottom:solid 1px #fff;

происходит какое-то "столкновение". Я придумал что-то вроде решения : 

/* THIRD +  LEVEL LISTS */
.nav ul ul li{
    border:none;
    border:1px solid #FFF;
    border-left:none;
}

Добавьте это наверху вашего третьего уровня.

Кажется, это ошибка в Chrome, но я искал хром и не нашел ничего связанного с этим.Вы должны сообщить об этом.

0 голосов
/ 03 апреля 2012 
.nav ul ul li:first-child {
   border-top:solid 1px white; <-- that line causes your problem I think.
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
}​
0 голосов
/ 03 апреля 2012

Я проверил ваш полноэкранный пример в Chrome Devtools и обнаружил следующую строку: 

.nav ul li {
  background: #777;
  border-bottom: solid 1px white; <---- I think this is your problem
}

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

...