css - Datatables CSS 与 Mozilla 决裂

Question

我在我的网站上使用 Datatables.js 作为表格。我没有更改数据表中的原始 CSS，但仅在 Mozilla 中，CSS 损坏是有原因的。

这是我的 HTML 代码:

<div class="full-container">
   <div class="row">
      <div class="col-sm-2 col-md-2 col-lg-2">
         <br><br>
         <center>
            adsense code          
         </center>
      </div>
      <div class="col-sm-9 col-md-9 col-lg-9">
         <table id="myTable" class="table table-bordered table-striped tablesorter">
            table content                 
         </table>
      </div>
   </div>
</div>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
       $('#myTable').dataTable();
    } );
</script>

这是它在 Chrome 和 Internet Explorer 中的样子

在 Mozilla 中是这样的

Answer 1

我遇到了同样的问题。要解决它，您必须使用 sDom 选项在您的表之前添加一个新类:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
       $('#myTable').dataTable({
           "sDom": 'fi<"clear">tp'
       });
    } );
</script>

sDom的语法可用here .根据您的需要进行调整。这里我们在表格前添加一个带有 clear 类的新 div。

然后添加此 CSS 代码来修复错误:

.clear {
    clear: both;
}