NVD3传奇色彩指南显示问题 - 无颜色出现在颜色指南中提示的Internet Explorer/Chrome浏览器中

Question

问题

我有一个nvd3图表我想与工具提示传奇色彩导向的色彩来呈现。

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

注意

通过检查Internet Explorer中我看到有代码应用了颜色，但没有颜色的呈现方式。

Demo Here

问题

如何显示工具提示在IE和Chrome传奇色彩引导颜色？

视察代码在IE浏览器

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

Answer 1

只需添加/修改下面的CSS将让你的颜色在IE工作。

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

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

Answer 2

没有高度空div将永远不会被渲染，尝试添加该CSS

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