Google Chrome 和 Firefox 之间的引导表显示差异答案

【问题标题】：bootstrap table display different between GoogleChrome and FirefoxGoogle Chrome 和 Firefox 之间的引导表显示差异
【发布时间】：2015-12-20 09:08:44
【问题描述】：

我正在使用引导表来显示我的数据，它在 Google Chrome 上运行良好，但在 Firefox 上无法正常运行。

这是我在 google chrome 上看到的。这是我在 firefox 上看到的。

这是我的代码

echo<<<EOF
  <div class="x_content">
     <table id="example" class="table table-bordered table-hover" style='font-size:13px;'>
                                    <thead>
                                        <tr height="10">
                                            <th class="col-sm-1">#</th>
                                            <th class="col-sm-8">Leave Category</th>
                                            <th>Is Active </th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                     <tbody>

EOF;
$this->fetch(); //this is the function to get data from database
echo<<<EOF
      </div>
    </div>
    </div>
EOF;

javasript

<script>

        var asInitVals = new Array();
        $(document).ready(function () {
            var oTable = $('#example').dataTable({
                "oLanguage": {
                    "sSearch": "Search all columns:"
                },
                "aoColumnDefs": [
                    {
                        'bSortable': false,
                        'aTargets': [0]
                    } //disables sorting for column one
        ],
                'iDisplayLength': 12,
                "sPaginationType": "full_numbers"
            });
            $("tfoot input").keyup(function () {
                /* Filter on the column based on the index of this element's parent <th> */
                oTable.fnFilter(this.value, $("tfoot th").index($(this).parent()));
            });
            $("tfoot input").each(function (i) {
                asInitVals[i] = this.value;
            });
            $("tfoot input").focus(function () {
                if (this.className == "search_init") {
                    this.className = "";
                    this.value = "";
                }
            });
            $("tfoot input").blur(function (i) {
                if (this.value == "") {
                    this.className = "search_init";
                    this.value = asInitVals[$("tfoot input").index(this)];
                }
            });
        });
    </script>

如何更改 css 以使其在两者上都能正常工作？

【问题讨论】：

如何用 php 构造 html 并不重要。您宁愿向我们展示生成的整个 html 代码，因为仅通过查看 HTML 错误的摘录很难找出它。
@Amarnasan 如果我删除 javascript 部分，布局看起来会很好
我们仍然需要看到完成的 HTML 代码。
@Epodax 我已经发现了问题，一旦我添加了 ` "sDom": 'Tlfrtip','` 就可以了，谢谢

标签： css twitter-bootstrap google-chrome firefox

【解决方案1】：

Bootstrap 在使用内置网格时有它的依赖项。

<div class="container"> <!-- It can be either container or container-fluid -->
 <div class="row"> <!-- Similar to the upper one -->
  <div class="col-md-12"> <!-- col-xs-*, col-md-*, col-lg-* -->
   ...
  </div>
 </div>
</div>

查看 Bootstrap 文档，尤其是网格：Bootstrap

【讨论】：