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

Question

问题

我有一个 nvd3 图表，我正在尝试使用工具提示 legend-color-guide 上的颜色进行渲染。

对于多个图表，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;
}

Answer 1

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

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

Answer 2

只需 add/change 跟随 css 即可使您的颜色在 IE 中正常工作。

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

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

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

NVD3 Legend Color Guide Rendering Issue - No color appearing in color guide in tooltip within Internet Explorer / Chrome

html

css

nvd3.js