NVD3 图例颜色指南渲染问题 - Internet Explorer / Chrome 的工具提示中的颜色指南中没有颜色出现答案

【问题标题】：NVD3 Legend Color Guide Rendering Issue - No color appearing in color guide in tooltip within Internet Explorer / ChromeNVD3 图例颜色指南渲染问题 - Internet Explorer / Chrome 的工具提示中的颜色指南中没有颜色出现
【发布时间】：2016-01-24 03:51:35
【问题描述】：

问题

我有一个 nvd3 图表，我正在尝试使用工具提示图例颜色指南上的颜色进行渲染。

对于多个图表，颜色在 Firefox 下面的选择器上显示良好。在 Internet Explorer 和 Chrome 上，我在每个图表的每个系列的工具提示上只看到一个白色填充。

注意

通过在 Internet Explorer 中的检查，我发现代码中应用了一种颜色，但没有呈现颜色。

Demo Here

问题

如何在 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;
}

【问题讨论】：

这些 div 看起来是空的，你确定它们在 CSS 中有定义的宽度/高度吗？
我修改了帖子以包含我原始设置中的 css。此代码已包含在我的应用程序中。
这很奇怪……有什么阻碍吗？上面有div还是什么？任何可能导致div消失的定位？现场版会很有帮助
图表是从 php 生成的，但是前端是在 html/css/js 中，所以我可以尝试创建一个演示。我可以看到 html 代码检查器在 IE 和 Chrome 中清楚地显示了一种颜色，只是在浏览器中没有呈现颜色。
你能通过检查器检查 div 是否确实在它们应该在的位置吗？通常，当您在检查器中选择他们的标签时，您会看到该框突出显示，看到什么了吗？

标签： html css nvd3.js

【解决方案1】：

只需添加/更改以下 css 即可使您的颜色在 IE 中正常工作。

td > div:not(.filterinput):not(.cell){
  -ms-overflow-y:hidden;
}

目前是-ms-overflow-y:scroll;

【讨论】：

【解决方案2】：

没有高度的空div永远不会被渲染，尝试添加这个CSS

.nvtooltip table td.legend-color-guide div { height:100%; min-height:10px; }

【讨论】：

请在我的原始帖子中查看新的演示链接来演示该问题。