Почему Chrome показывает дополнительную строку при использовании Google org chart?

Question

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

Для всех остальных браузеров, та же страница показывает, как это:

Как вы можете видеть, нет синих линий между узлами. Когда я смотрю в Firebug или хромированными Дев инструментов представляется, что его:

.google-visualization-orgchart-node 

border: 2px solid #b5d9ea; 

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

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

Answer 1

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

Answer 2

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

Answer 3

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

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

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

Answer 4

Установите опцию 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 5

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

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

Answer 6

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

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

Answer 7

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

border-collapse: collapse; 

, который был причиной. Фиксированный его с установкой

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

Answer 8

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

table { 
border-collapse: separate!important; 
}