引导行跨度Firefox错误答案

【问题标题】：bootstrap rowspan firefox bug引导行跨度Firefox错误
【发布时间】：2017-05-26 22:42:14
【问题描述】：

浏览器：只有firefox，Chrome就可以 操作系统： Linux、Windows（OSX 未测试）

示例：

        <tr class="day-row">
            <td class="center" rowspan="4">1</td>
            <td class="center" rowspan="2">projekt</td>
            <td>ActivityGroupName object</td>
            <td>None</td>
            <td>0.8</td>
            <td class="center" rowspan="4">1.6</td>
            <td class="center" rowspan="4"></td>
            <td><a>Upravit</a></td>
        </tr>
        <tr class="day-row">
            <td></td>
            <td></td>
            <td></td>
            <td><a>Nový</a></td>
        </tr>
        <tr class="day-row">
            <td class="center" rowspan="2">frontend</td>
            <td>ActivityGroupName object</td>
            <td>None</td>
            <td>0.8</td>
            <td><a>Upravit</a></td>
        </tr>
        <tr class="day-row">
            <td></td>
            <td></td>
            <td></td>
            <td><a>Nový</a></td>
        </tr>


        <tr class="day-row">
            <td class="center" rowspan="4">2</td>
            <td class="center" rowspan="2">projekt</td>
            <td>ActivityGroupName object</td>
            <td>None</td>
            <td>0.8</td>
            <td class="center" rowspan="4">HERE IS BORDER-BOTTOM SHOWN</td>
            <td class="center" rowspan="4"></td>
            <td><a>Upravit</a></td>
        </tr>
        <tr class="day-row">
            <td></td>
            <td></td>
            <td></td>
            <td><a>Nový</a></td>
        </tr>
        <tr class="day-row">
            <td class="center" rowspan="2">frontend</td>
            <td>ActivityGroupName object</td>
            <td>None</td>
            <td>0.8</td>
            <td><a>Upravit</a></td>
        </tr>
        <tr class="day-row">
            <td></td>
            <td></td>
            <td></td>
            <td><a>Nový</a></td>
        </tr>


        <tr class="day-row">
            <td class="center" rowspan="4">3</td>
            <td class="center" rowspan="2">projekt</td>
            <td>ActivityGroupName object</td>
            <td>None</td>
            <td>0.8</td>
            <td class="center" rowspan="4">1.6</td>
            <td class="center" rowspan="4"></td>
            <td><a>Upravit</a></td>
        </tr>
        <tr class="day-row">
            <td></td>
            <td></td>
            <td></td>
            <td><a>Nový</a></td>
        </tr>
        <tr class="day-row">
            <td class="center" rowspan="2">frontend</td>
            <td>ActivityGroupName object</td>
            <td>None</td>
            <td>0.8</td>
            <td><a>Upravit</a></td>
        </tr>
        <tr class="day-row">
            <td></td>
            <td></td>
            <td></td>
            <td><a>Nový</a></td>
        </tr>

        </tbody>
    </table>

https://jsfiddle.net/fdyrs27x/1/

说明： 有 3 种情况，仅在第一种情况下，错误发生在 6 下以 '2' 开头的行上。td。 td 下有一行，但单元格扩展为四行。它不应该在那里。

默认引导
引导带 td, tr -> 边框：1px 实心灰色的;
只有 2 行的默认引导程序

有人知道怎么解决吗？

【问题讨论】：

检查 Normalize.css 第 416 行注释“border-collapse:collapse;”尝试在本地包含 css。
是的，这就是解决方案，谢谢，如果你能创建答案，我会接受它
如果可以分享css？
我在下载的 bootstrap.css 中的两行上评论了border-collapse:collapse，它解决了这个问题。
太好了，它解决了你的问题。

标签： html css twitter-bootstrap firefox

【解决方案1】：

试试

从以下位置下载引导 css。 [https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css] 将其嵌入您的 html/页面。

从表定义中注释下面的代码。

border-collapse:collapse

阅读更多Here

【讨论】：

【解决方案2】：

将以下内容添加到您的外部引导 css

`table {
    border-collapse: initial !important;
}`

它会阻止表格边框折叠成单个边框。

不要编辑您的 bootstrap.css 文件。

【讨论】：

【解决方案3】：

bootstrap css 有一个样式

 .table > tbody > tr > td{
   padding: 8px;
   line-height: 1.42857143;
   vertical-align: top;
   border-top: 1px solid #ddd;
}

您需要编写代码以便覆盖它。（这是导致问题的原因）

所以你的代码应该是：检查下面的 sn-p 或jsFiddle

.table.bordered, .borderd th, .table > tbody > tr > td{
  border: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
       
       <h2>
         ERROR SHOWN
       </h2>
       <table class="table table-stripped day-list">
            <tbody>

            <tr class="day-row">
                <td class="center" rowspan="4">1</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
               
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">2</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">HERE IS BORDER-BOTTOM SHOWN</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                 <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">3</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>

            </tbody>
        </table>
               <h2>
         WITHOUT ERROR - added border to table th and td
       </h2>
       <table class="table table-stripped bordered">
            <tbody>

            <tr class="day-row">
                <td class="center" rowspan="4">1</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">2</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">3</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>

            </tbody>
        </table>
                       <h2>
        ALSO WITHOUT ERROR - different row counts
       </h2>
       <table class="table table-stripped">
            <tbody>

            <tr class="day-row">
                <td class="center" rowspan="4">1</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">2</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>

            </tbody>
        </table>

【讨论】：