Html chrome中显示表格边框，但firefox或IE中不显示

我正在使用BootstrapV3.0.0在表格标题上创建下拉列表。我在设计时使用了chrome浏览器，一切看起来都很好。现在，当我在Firefox或IE中查看页面时，我的手机边框丢失了

这是我的下拉列表的html

<th class="dropdown">
    <button class="btn-th dropdown-toggle" type="button" data-toggle="dropdown" style="min-width:82px;">
        Colour
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" onclick="filterRows('', 0); return false;">Show All</a></li>
        <li><a href="#" onclick="filterRows('colour','Red'); return false;">Red</a></li>    
        <li><a href="#" onclick="filterRows('colour','Blue'); return false;">Blue</a></li>  
        <li><a href="#" onclick="filterRows('colour','Green'); return false;">Green</a></li>    
        <li><a href="#" onclick="filterRows('colour','Yellow'); return false;">Yellow</a></li>  
        <li><a href="#" onclick="filterRows('colour','Brown'); return false;">Brown</a></li>                        
    </ul>
</th>               

它在chrome中的外观：

Firefox中的外观：

以及当我右键单击并检查元素并选择computed时Firefox显示的内容。正如你所看到的，Firefox说它应该有一个底部边框！

在IE中，上边框和下边框均不存在：

两边的单元格都是标准的，没有铃铛或哨子，它们在所有浏览器上显示所有边框

---

我在这里遗漏了什么？我的边框到哪里去了？

我在缺少表格边框方面也遇到了同样的问题。我的解决办法是：

table{
      border-collapse: collapse !important;
      border-spacing: 0px;
     border: 1px solid #DDD;
 }

表行的边框和边框：

    table tr{
       border-bottom: 1px solid #DDD !important;
      }

我在布局中使用了Bootstrap，表中也有Bootstrap css类，如 “表格条带边框的表格”

当我尝试使用此解决方案时，此解决方案对我有效

    border-collapse: separate !important;

这对我来说不太合适

    border-collapse: separate !important;