从字体使用真棒图标免费jqGrid的工具栏按钮在Chrome中删除舞蹈效果(Remove danci

我试图演示

http://www.ok-soft-gmbh.com/jqGrid/FortAwesome/FontAwesome2.htm

从答案

如何使jqGrid的顶部工具栏自定义按键更大像标准按钮

在Chrome中小于100％的浏览器缩放级别。

鼠标悬停在工具栏按钮工具栏引起振动难看。

它100％ZOON不会发生，但它在每一个缩放水平小于100％它不会在缩放级别发生> = 100％，它不且发生在Intrnet Explorer中发生

它发生在顶部和底部的工具栏。

如何解决这一问题？

在我的应用程序文本低于按钮和字体大小为16。我试图取代

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }

同

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    margin: 1px 4px;
    font-size: 16px;
}

在这种情况下跳舞是小了些，但仍然存在。如何解决这一问题？

如果jQuery UI的图标用于问题doent发生。如何让FontAwesome图标也可以正常使用解决这一问题？

更新

我加在回答样式（从http://www.ok-soft-gmbh.com/jqGrid/OK/FontAwesome4Large-borderlessOnHover3.htm ）从答案演示最后如何把寻呼机结束在免费的jqGrid工具栏的顶部，但跳舞仍然出现了导航按钮和按下切换按钮。

同时按下禁用的按钮在他们绘制的边界。如何解决这一问题？

测试用例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>https://stackoverflow.com/q/27617764/315935</title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.css">
    <style>
        html, body { font-size: 75%; }
        .ui-datepicker select.ui-datepicker-year,
        .ui-datepicker select.ui-datepicker-month {
            color: black
        }
        .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; font-weight: normal; }






.ui-jqgrid > .ui-jqgrid-pager .navtable,
.ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
    font-size: 16px;
}

.ui-jqgrid .ui-pg-table {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .ui-pg-table .ui-pg-button:hover, .ui-jqgrid .ui-pg-table.navtable .ui-pg-button.ui-state-active {
        font-weight: normal;
        border: 0 none;
        background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
    }

.ui-pg-table .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}

.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}




    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.js"></script>
    <script>
    //<![CDATA[
    /*global $ */
    /*jslint browser: true */
    $(function () {
        "use strict";
        var mydata = [
                { id: "10",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "", tax: "", closed: true,  ship_via: "TN", total: "" },
                { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "40",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "90",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
            ],
            $grid = $("#grid"),
            initDateEdit = function (elem) {
                $(elem).datepicker({
                    dateFormat: "dd-M-yy",
                    autoSize: true,
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    showWeek: true
                });
            },
            initDateSearch = function (elem) {
                setTimeout(function () {
                    initDateEdit(elem);
                }, 100);
            };

        $grid.jqGrid({
            data: mydata,
            colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
            colModel: [
                { name: "act", template: "actions" },
                { name: "name", align: "center", width: 92, editrules: {required: true} },
                { name: "invdate", width: 72, align: "center", sorttype: "date", frozen: true,
                    formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
                    editoptions: { dataInit: initDateEdit },
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
                { name: "amount", width: 56, template: "number", hidden: true },
                { name: "tax", width: 35, template: "number", autoResizableMinColSize: 40, hidden: true },
                { name: "total", width: 43, template: "number", hidden: true },
                { name: "closed", width: 49, template: "booleanCheckboxFa" },
                { name: "ship_via", width: 76, align: "center", formatter: "select",
                    edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
                    stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
                { name: "note", width: 43, edittype: "textarea", sortable: false }
            ],
            cmTemplate: { editable: true, autoResizable: true },
            iconSet: "fontAwesome",
            rowNum: 10,
            autoResizing: { compact: true },
            rowList: [5, 10, 20, "10000:All"],
            //pagerpos: "right",
            //viewrecords: true,
            //pgbuttons: false,
            //pginput: false,
            //width: 390,
            toppager: true,
            rownumbers: true,
            sortname: "invdate",
            sortorder: "desc",
            navOptions: {
                position: "center",
                addtext: "Add",
                edittext: "Edit",
                deltext: "Delete",
                searchtext: "Search",
                refreshtext: "Reload",
                viewtext: "View",
                savetext: "Save",
                canceltext: "Cancel",
                iconsOverText: true
            },
            caption: "Demonstration how to make full width navigator bar"
        }).jqGrid("navGrid", {view: true})
        .jqGrid("inlineNav")
        //.jqGrid("filterToolbar")
        .jqGrid("gridResize");

        var autoedit = true;
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-star",
            caption: "Toggle",
            id: "AutoEdit",
            title: "Toggle autoedit",
            onClickButton: function (options, e) {
                var $me = $(e.currentTarget);
                $me.toggleClass("ui-state-active");
                autoedit = $me.hasClass("ui-state-active");
                $me.attr("aria-pressed", autoedit ? "true" : "false");
            }
        });
        $("#grid_toppager")
            .find(".ui-pg-button")
            .each(function (i) {
                $(this).attr({
                    tabindex: String(i),
                    role: "button"
                });
            });
        //$("#AutoEdit").attr("role", "button");
        if (autoedit) {
            $("#AutoEdit").click();
        }
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-table",
            caption: "Columns",
            title: "Choose columns",
            onClickButton: function (options, e) {
                $(this).jqGrid("columnChooser");
            }
        });
        $("#grid_toppager_left").hide();
        $("#grid_toppager_right").hide();
        $("#grid_toppager_center").attr("colspan", "2");
        $("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""});
        $("#grid_toppager_center").find(">.navtable").append(
            $("#grid_toppager_center").find(">table.ui-pg-table")
        );
        $("#grid_toppager_center").find(">.navtable").children().each(function() {
            $(this).css("float", "left");
        });
        $grid.bind("jqGridAfterGridComplete", function () {
            var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
            $toppager.find(".navtable").css("width", "");
        });
    });
    //]]>
    </script>
</head>
<body>
    <div id="outerDiv" style="margin:5px;">
        <table id="grid"></table>
    </div>
</body>
</html>

悬停按钮“跳舞”的原因是显示在盘旋像素边框的缩放比例。见行 jQuery UI的CSS的。缩放在不同的网络浏览器非常困难的方式来实现。因此，边界1px的将像在保证金或pagging 1px的同样的方式不进行缩放。因此，该行中使用ui.jqgrid.css消除只有在放大100％，200％等情况下悬停按钮的“跳舞”。

我可以建议你正在删除悬停按钮的边界问题的唯一安全的解决方案。该演示使用CSS

.navtable .ui-pg-button.ui-state-hover {
    border: 0 none;
}
.ui-jqgrid .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

和悬停按钮将显示像下面的图片

你还可以更改悬停按钮用于显示悬停效果更加清晰的背景颜色。例如接下来的演示使用

.navtable .ui-pg-button.ui-state-hover {
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-jqgrid .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

将结果示于下一个图象

更新：要在导航按钮和在的按钮，删除“跳舞” formatter: "actions"可以使用下面的CSS，例如：

.ui-pg-table .ui-pg-button:hover {
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-pg-table .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}
.ui-jqgrid .jqgrow  .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}

看到演示。

更新2： 演示说明如何删除其在导航栏中移动分页按钮的“舞蹈”。另外，它还显示了如何卸下的树状态的按钮“跳舞”。它使用CSS规则

.ui-pg-table .ui-pg-button:hover,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active {
    border: 0 none;
}
.ui-pg-table .ui-pg-button:hover * {
    background-color: #b6dbf7
}
.ui-pg-table .ui-pg-table.navtable .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button:hover,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button span.fa {
    margin-top: 2px;
}
.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
}
.jqgrow .ui-jqgrid-actions > .ui-pg-div:hover > span.fa,
.jqgrow .ui-jqgrid-actions > .ui-pg-div:hover > span.ui-icon {
    background-color: #b6dbf7;
}