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

问题

我有一个nvd3图表，我正试图用工具提示“图例颜色指南”上的颜色渲染

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

注意

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

问题

如何在IE和Chrome中显示工具提示图例颜色指南的颜色

检查了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>

  .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

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

---

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

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

---

当前为

-ms-overflow-y:滚动

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