Jquery Ui对话框按钮更改鼠标悬停时的位置

我使用jquery ui对话框，并使用jquery添加按钮，如下所示：

 $("#151").dialog({
                autoOpen: false,
                autoResize: true,
                buttons: {
                    "OK": function () {
                        jQuery(this).dialog('close');
                    }
                }
                ,
                open: function () {
                    $('.ui-dialog-buttonset').find('button:contains("OK")').focus();
                    $('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
                }
            });

.customokbutton { 
    text-indent: -9999em; /* hides the text */
    color: transparent; /* also hides text */
    background-image: url(images/login-icon.png); /*replaces default image */
     background-repeat: no-repeat; 
    background-color: transparent;  
    background-repeat: no-repeat;   
    cursor: pointer;  
    border:none;
    height:30px;
    outline: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #707070;
/*  background: #dadada;*/
    font-weight: normal;
    color: #212121;
}

.customokbutton { 
  [...]
  border:none !important;
  [...]
}

custombutton类如下所示：

 $("#151").dialog({
                autoOpen: false,
                autoResize: true,
                buttons: {
                    "OK": function () {
                        jQuery(this).dialog('close');
                    }
                }
                ,
                open: function () {
                    $('.ui-dialog-buttonset').find('button:contains("OK")').focus();
                    $('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
                }
            });

.customokbutton { 
    text-indent: -9999em; /* hides the text */
    color: transparent; /* also hides text */
    background-image: url(images/login-icon.png); /*replaces default image */
     background-repeat: no-repeat; 
    background-color: transparent;  
    background-repeat: no-repeat;   
    cursor: pointer;  
    border:none;
    height:30px;
    outline: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #707070;
/*  background: #dadada;*/
    font-weight: normal;
    color: #212121;
}

.customokbutton { 
  [...]
  border:none !important;
  [...]
}

但当我把鼠标放在按钮上时，它会向下向右移动。我看到使用Firebug时，当我将鼠标移走（更改位置）时，添加了以下css类

---

如何修复它？

这很大程度上取决于主题，但jQuery CSS中的

ui状态悬停似乎有1px边框：

border: 1px solid #fbcb09;

css在这里：

也许这就是为什么要左右移动按钮1px。您可以尝试强制执行
边框：无属性，如下所示：

 $("#151").dialog({
                autoOpen: false,
                autoResize: true,
                buttons: {
                    "OK": function () {
                        jQuery(this).dialog('close');
                    }
                }
                ,
                open: function () {
                    $('.ui-dialog-buttonset').find('button:contains("OK")').focus();
                    $('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
                }
            });

.customokbutton { 
    text-indent: -9999em; /* hides the text */
    color: transparent; /* also hides text */
    background-image: url(images/login-icon.png); /*replaces default image */
     background-repeat: no-repeat; 
    background-color: transparent;  
    background-repeat: no-repeat;   
    cursor: pointer;  
    border:none;
    height:30px;
    outline: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #707070;
/*  background: #dadada;*/
    font-weight: normal;
    color: #212121;
}

.customokbutton { 
  [...]
  border:none !important;
  [...]
}

给我们一个使用类似JSFIDDLE的代码的工作示例，以及如何在jquery ui css中定义
ui状态悬停
类？@Tallmaris请检查cssYup的更新问题，可能是边框本身导致了这种变化。查看可能的解决方案的答案…此问题是否得到解决？我在这个线程中看不到解决方案，但我有同样的问题。嗯。。。你能做一把快速工作的小提琴吗？我试过了，它似乎工作正常：很抱歉，我不能生产小提琴，因为我的css文件太长，我不知道是哪种风格的影响这一点。如何强制按钮位于同一位置？您可以使用Chrome调试器，自己手动添加
ui状态悬停
，以便调查应用了哪些样式。我应该在ui状态悬停中添加哪些样式以使按钮位于同一位置？