使用Google组织结构图时，为什么Chrome会显示额外的行？

Question

我正在使用Google org chart，除了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类应用了任何边界规则 。谷歌的可视化-组织结构图-linenode

Answer 4

我会尝试Patrick设置.google-visualization-orgchart-linenode {border: 0}的答案。如果这不起作用，请尝试设置自separate by default以来的border-collapse属性。

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

虽然奇怪的是它只能在Chrome中显示给你。确保您拥有your DOCTYPE setup correctly。

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