html - 表格边框出现在 chrome 但不是 firefox 或 IE

Question

我正在使用 Bootstrap v3.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>               

类 btn-th 的 css

.btn-th {
  font-weight: bold;
  padding: 0 !important;

  cursor: pointer;
  border-radius: 0;
  border-width: 0px;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: transparent;
  background-color: transparent;
}

它在 chrome 中的样子:

它在 Firefox 中的样子:

以及当我右键单击并检查元素并选择计算时 Firefox 显示的内容。如您所见——Firefox 说它应该有一个底部边框!

在 IE 中，上边框和下边框都不存在:

两边的单元格都是标准的，没有花里胡哨的东西，它们在所有浏览器上都显示所有边框。

我在这里错过了什么 - 我的边界去哪儿了？

Answer 1

我遇到了同样的问题，缺少表格边框。我的解决方案是:

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;

它不适合我。