[英]Why is Chrome showing extra line when using Google org chart?
I am using Google org chart and it works great on every browser except Chrome. 我正在使用Google组织结构图 ,除了Chrome之外,它在每个浏览器上运行良好。 On Chrome I see these extra lines in between the boxes like this:
在Chrome上,我在这些框之间看到这些额外的行,如下所示:
For all other browsers, the same page shows up as this: 对于所有其他浏览器,同一页面显示如下:
As you can see there are no blue lines in between the nodes. 如您所见,节点之间没有蓝线。 When I look in firebug or chrome dev tools it appears that its:
当我查看firebug或chrome dev工具时,它看起来是:
.google-visualization-orgchart-node
border: 2px solid #b5d9ea;
That is causing the issue because if i change the border to 0px then the issue goes away (but the border on the actual nodes also goes away which is obviously an issue. 这导致了这个问题,因为如果我将边框更改为0px,那么问题就会消失(但实际节点上的边界也会消失,这显然是一个问题。
Any suggestion for how to render this correctly in Chrome. 有关如何在Chrome中正确呈现此内容的任何建议。 I don't see this issue happening in the demo link above.
我没有在上面的演示链接中看到这个问题。
In my case it was Bootstrap 3 with 在我的情况下,它是Bootstrap 3
border-collapse: collapse;
that was the cause. 这就是原因。 Fixed it with setting
用设置修正了它
table.google-visualization-orgchart-table {
border-collapse: separate;
}
.google-visualization-orgchart-linenode {
border: 0;
}
检查您是否为此css类.google-visualization-orgchart-linenode应用了任何边界规则
I would try Patrick's answer of setting the .google-visualization-orgchart-linenode {border: 0}
. 我会尝试Patrick设置
.google-visualization-orgchart-linenode {border: 0}
的答案。 If that doesn't work try setting the border-collapse
property since its separate by default . 如果这不起作用,请尝试设置
border-collapse
属性,因为它默认是单独的 。
.google-visualization-orgchart-table,
.google-visualization-orgchart-table tr,
.google-visualization-orgchart-table td {
border-collapse: collapse;
}
Although that's weird that its only showing in Chrome for you. 尽管奇怪的是它只能在Chrome中为您呈现。 Make sure you have your DOCTYPE setup correctly .
确保正确设置DOCTYPE 。
Set the nodeClass option on the chart.draw with a color and background-color to override the default color scheme, which solves the problem in Chrome. 使用颜色和背景颜色在chart.draw上设置nodeClass选项以覆盖默认颜色方案,从而解决了Chrome中的问题。
Set two css classes: 设置两个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; }
While initializing the chart set the nodeClass & selectedNodeClass options: 初始化图表时,设置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);
This is what I added to stop the random lines from showing up 这是我添加以阻止随机行显示的内容
<style>
table{
border-collapse: separate !important;
}
</style>
We had an incompatibility with normalize.css that caused this same issue for us. 我们与normalize.css不兼容,这给我们带来了同样的问题。 Adding the following CSS fixed it:
添加以下CSS修复它:
table.google-visualization-orgchart-table {
border-collapse: inherit;
}
I also added the following to fix the issue: 我还添加了以下内容来解决此问题:
table {
border-collapse: separate!important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.