使用Google組織結構圖時，為什么Chrome會顯示額外的行？

Question

我正在使用Google組織結構圖 ，除了Chrome之外，它在每個瀏覽器上運行良好。 在Chrome上，我在這些框之間看到這些額外的行，如下所示：

對於所有其他瀏覽器，同一頁面顯示如下：

如您所見，節點之間沒有藍線。 當我查看firebug或chrome dev工具時，它看起來是：

.google-visualization-orgchart-node

border: 2px solid #b5d9ea;

這導致了這個問題，因為如果我將邊框更改為0px，那么問題就會消失（但實際節點上的邊界也會消失，這顯然是一個問題。

有關如何在Chrome中正確呈現此內容的任何建議。 我沒有在上面的演示鏈接中看到這個問題。

Answer 1

在我的情況下，它是Bootstrap 3

border-collapse: collapse;

這就是原因。 用設置修正了它

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

Answer 2

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

Answer 3

檢查您是否為此css類.google-visualization-orgchart-linenode應用了任何邊界規則

Answer 4

我會嘗試Patrick設置.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 5

使用顏色和背景顏色在chart.draw上設置nodeClass選項以覆蓋默認顏色方案，從而解決了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 6

這是我添加以阻止隨機行顯示的內容

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

Answer 7

我們與normalize.css不兼容，這給我們帶來了同樣的問題。 添加以下CSS修復它：

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

Answer 8

我還添加了以下內容來解決此問題：

table {
border-collapse: separate!important; 
}