使用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; 
}