html - bootstrap-4.0 表 tr 类 d-flex 在 Firefox 中无法正常工作
问题描述
bootstrap-4.0 table tr class d-flex 在 Firefox 浏览器中无法正常工作，但在 chrome 中工作。我已附加我的代码 chrome 工作正常但 Firefox 浏览器无法正常工作我正在使用 - bootstrap 4.0 - HTML-5 - CSS3
bootstrap-4.0 table tr class d-flex 在 Firefox 浏览器中无法正常工作，但在 chrome 中工作。我已附加我的代码 chrome 工作正常但 Firefox 浏览器无法正常工作我正在使用 - bootstrap 4.0 - HTML-5 - CSS3
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12 table-responsive">
<table class="table total_records table-bordered">
<thead class="thead-light">
<tr class="d-flex">
<th class="text-center col-2">Start Date</th>
<th class="text-center col-2">End Date</th>
<th class="text-center col-2">Absence Type</th>
<th class="text-center col-1">Days</th>
<th class="text-center col-2">Status</th>
<th class="text-center col-3">Action</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Regularization</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Permission</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Rejected</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Sick</td>
<td class="col-1">5</td>
<td class="col-2">Pending</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
</tbody>
</table>
</div>
</div></div><div class="col-12 table-responsive">
<table class="table total_records table-bordered">
<thead class="thead-light">
<tr class="d-flex">
<th class="text-center col-2">Start Date</th>
<th class="text-center col-2">End Date</th>
<th class="text-center col-2">Absence Type</th>
<th class="text-center col-1">Days</th>
<th class="text-center col-2">Status</th>
<th class="text-center col-3">Action</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Regularization</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Permission</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Rejected</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Sick</td>
<td class="col-1">5</td>
<td class="col-2">Pending</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
</tbody>
</table>
</div>
解决方案
推荐阅读
- ruby-on-rails - PATCH 操作中的 SCIM 用户名
- sql-server - SQL - 避免字符串重复，中间有空格
- visual-studio-code - 如何在 vscode 上获得 Firefox 扩展 API 的自动完成/智能感知功能？
- javascript - 有没有办法在捆绑包中选择添加功能？
- mongodb - 'mongod' 不是内部或外部命令、可运行程序或批处理文件
- ios - 检测 Text.DateStyle.timer 何时到达 00:00
- wpf - ResourceDictionary makes use of UserControl -> Resources within UserControl cannot be resolved
- python - 切片索引必须是整数或 None 或者在 numpy python3 中有一个 __index__ 方法
- c# - 无法翻译 LINQ 表达式！？为什么？
- java - 在集成流中包含数据持久性的最佳实践 (SpringIntegration)