Почему в Chrome отображается дополнительная строка при использовании диаграммы Google?

Question

Я использую Google org chart, и он отлично работает на всех браузерах, кроме Chrome. В Chrome я вижу эти дополнительные строки между полями:

Для всех других браузеров та же страница отображается так:

Как видите, между узлами нет синих линий. Когда я смотрю в Firebug или Chrome Dev Tools, кажется, что это:

.google-visualization-orgchart-node

border: 2px solid #b5d9ea;

Это вызывает проблему, потому что если я изменю границу на 0px, тогда проблема исчезнет (но граница на реальных узлах также исчезнет, ​​что, очевидно, является проблемой.

Любое предложение о том, как правильно отобразить это в Chrome. Я не вижу этой проблемы в демонстрационной ссылке выше.

Answer 1

.google-visualization-orgchart-linenode {
    border: 0;
}

Answer 2

В моем случае это был Bootstrap 3 с

border-collapse: collapse;

это было причиной. Исправлено с настройкой

table.google-visualization-orgchart-table {
    border-collapse: separate;
}

Answer 3

Я бы попробовал ответ Патрика об установлении .google-visualization-orgchart-linenode {border: 0}, Если это не сработает, попробуйте установить border-collapse свойство, поскольку его отдельный по умолчанию.

.google-visualization-orgchart-table,
.google-visualization-orgchart-table tr,
.google-visualization-orgchart-table td {
   border-collapse: collapse;
}

Хотя это странно, что это только показ в Chrome для вас. Убедитесь, что вы правильно установили DOCTYPE.

Answer 4

Это то, что я добавил, чтобы предотвратить появление случайных линий

<style>
    table{
        border-collapse: separate !important;
    }
</style>

Answer 5

У нас была несовместимость с normalize.css, которая вызвала эту же проблему для нас. Добавление следующего CSS исправило это:

table.google-visualization-orgchart-table {
  border-collapse: inherit;
}

Answer 6

Установите параметр nodeClass в chart.draw с цветом и фоновым цветом, чтобы переопределить цветовую схему по умолчанию, которая решает проблему в Chrome.

Установите два класса CSS:

//css class for default tree node
.default-leaf { color:black; background-color:#DCDCDC; }

// css class for selected tree node
.selected-leaf { color:white; background-color:#191970; }

При инициализации диаграммы установите параметры nodeClass и selectedNodeClass:

var chart = new google.visualization.OrgChart( document.getElementById('chart_div'));

// setting options - allowHtml (required for visuals to work), css classes for a tree-node & selected-tree-node
var options = { 'allowHtml': true, 'nodeClass': 'default-leaf', 'selectedNodeClass': 'selected-leaf'};
chart.draw(data, options);

Answer 7

Я также добавил следующее, чтобы исправить проблему:

table {
border-collapse: separate!important; 
}

Answer 8

Проверьте, применяется ли какое-либо правило границы для этого класса CSS.google-visualization-orgchart-linenode