问题
我有一个 nvd3 图表,我正在尝试使用工具提示 legend-color-guide 上的颜色进行渲染。
对于多个图表,Firefox 下方的选择器中的颜色显示良好。在 Internet Explorer 和 Chrome 上,我在每个图表的每个系列的工具提示上只看到一个白色填充。
注意
通过在 Internet Explorer 中检查,我发现代码中应用了颜色,但没有呈现任何颜色。
问题
如何在 IE 和 Chrome 中显示工具提示 legend-color-guide 的颜色?
来自 Internet Explorer 的检查代码
<div class="nvtooltip xy-tooltip nv-pointer-events-none" id="nvtooltip-41258" style="left: 0px; top: 0px; opacity: 0; transform: translate(398px, 155.51px) !important;">
<table>
<thead>
<tr>
<td colspan="3"><strong class="x-value">Oct 07, 2015</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td class="legend-color-guide">
<div style="background-color: red;"></div>
</td>
<td class="key">Total Action Items</td>
<td class="value">152</td>
</tr>
<tr>
<td class="legend-color-guide">
<div style="background-color: rgb(85, 85, 221);"></div>
</td>
<td class="key">ECD Items</td>
<td class="value">130</td>
</tr>
<tr>
<td class="legend-color-guide">
<div style="background-color: orange;"></div>
</td>
<td class="key">Original Due Items</td>
<td class="value">122</td>
</tr>
<tr>
<td class="legend-color-guide">
<div style="background-color: green;"></div>
</td>
<td class="key">Closed Items</td>
<td class="value">63</td>
</tr>
</tbody>
</table>
</div>
CSS 选择器
.nvtooltip table td.legend-color-guide div
来自 nv.min.css 的代码片段
.nvtooltip table td.legend-color-guide div {
width: 8px;
height: 8px;
vertical-align: middle;
}
.nvtooltip table td.legend-color-guide div {
width: 12px;
height: 12px;
border: 1px solid #999;
}
最佳答案
只需添加/更改以下 css 即可使您的颜色在 IE 中正常工作。
td > div:not(.filterinput):not(.cell){
-ms-overflow-y:hidden;
}
目前是-ms-overflow-y:scroll;
关于html - NVD3 Legend 颜色指南渲染问题 - Internet Explorer/Chrome 中工具提示的颜色指南中没有颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34972008/