Firefox 中的按钮无法正确对齐答案

【问题标题】：Buttons won't align properly in FirefoxFirefox 中的按钮无法正确对齐
【发布时间】：2015-01-02 23:11:04
【问题描述】：

Rails 4、Ruby 2、Bootstrap 3、DataTables 1.10

分页按钮在 IE 和 Chrome 中正确对齐。它们不会在 Firefox 中对齐。我尝试使用这个补丁for Firefox。我尝试使用 input-group/input-group-btn。此代码由 DataTables 生成。

在 Firebug 中，First 右上角的 funky 块以相反的顺序引用 HTML 中的所有 li 元素。最左边是“last”，然后是“next”，然后是“previous”，然后是“first”。

火狐：

Chrome 和 IE：

DataTables 为 Bootstrap 生成的 HTML：

<div class="col-xs-6" style="outline: medium none;">
    <div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full" id="adminitemstable_paginate" style="outline: medium none;">
        <ul class="pagination" style="outline: medium none;">
            <li class="fg-button ui-button ui-state-default first disabled" aria-controls="adminitemstable" tabindex="0" id="adminitemstable_first" style="outline: medium none;">
                <a href="#" style="outline: medium none;">
                    First
                </a>
            </li>
            <li class="fg-button ui-button ui-state-default previous disabled" aria-controls="adminitemstable" tabindex="0" id="adminitemstable_previous" style="outline: medium none;">
                <a href="#" style="outline: medium none;">
                    Previous
                </a>
            </li>
            <li class="fg-button ui-button ui-state-default next" aria-controls="adminitemstable" tabindex="0" id="adminitemstable_next" style="outline: medium none;">
                <a href="#" style="outline: medium none;">
                    Next
                </a>
            </li>
            <li class="fg-button ui-button ui-state-default last" aria-controls="adminitemstable" tabindex="0" id="adminitemstable_last" style="outline: medium none;">
                <a href="#" style="outline: medium none;">
                    Last
                </a>
            </li>
        </ul>
    </div>
</div>

【问题讨论】：

你能发一个fiddle吗？
@Vucko 小提琴是jsfiddle.net/wszd0bt7/7。但是，IE 和 Chrome 都将 Last 按钮放入其中。 Firefox 的显示与此处显示的类似，只是它没有显示 First 右上角的时髦框，至少我可以看到...
@R_G 您正在将 Jquery UI（使用 fg-button、ui-state-default 类）与 Bootstrap 混合，因此会出现样式问题。他们的网站上有example for bootstrap。 Fiddle using datatable's bootstrap
@anpsmn 整个表是使用带有 jquery-datatables-rails gem 的 DataTables 构建的，所以这就是混合样式的起源。
OBTW，我们这几天的cmets都去哪儿了？？？

标签： html css twitter-bootstrap firefox datatables

【解决方案1】：

你设置成这样设置

.fg-button {
    float: left;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none !important;
}

直播Demo

【讨论】：

类“fg-button”存储在哪里？
@i am not... in over extra style sheet.