在jQuery对话框窗口中偏离中心x

Question

我正在使用标准的 jquery 对话框窗口，右上角关闭窗口的 X 按钮不在框中。我确定以前有人问过这个问题，我今天缺乏谷歌技能......任何帮助将不胜感激。

不是“居中”的元素是

 <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>

应该在里面

 <span class="ui-button-text">close</span>

无法让 jfiddle 工作。我也好久没睡了……

代码如下：

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
 <!--<script src='spin.js'></script>-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>


 <script>
 $(function(){
$('#dialog').dialog({
    autoOpen: false,
    width: 800,

    modal: true,
    position: {
        my: "top",
        at: "top"
    },
    resizable: false,
    buttons: {
             "Go": function () {

                 $('#dialog').html('hello');
             },
            "Cancel": function () {

                 $(this).dialog("close");
             }
    }
});
$('#subButton').click(function () {
    $('#dialog').html("look at x");
    $('#dialog').dialog('open');
});
 });
 </script>
 <form name='stuff' method='POST'>
<input type='button' id='subButton' value='Confirm Settings'>
 </form>
 <div id='dialog'></div>

Answer 1

当我的 jQuery UI 脚本和 CSS 主题是不同的版本时，我遇到了这个问题。就我而言，我正在升级 jQuery UI，并没有考虑需要更改样式表。

我的建议是要么重新打包整个批次并从头开始，要么在 ThemeRoller 中找到您通常使用的主题，并将您的 UI CSS 替换为该样式表。

Answer 2

具体问题在于按钮图标 .ui-icon-closethick 的位置 我正在使用以下css和js：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

问题仍然存在，对话框中的 x 按钮图标未对齐，并且页面上没有引用其他 css。我最终创建了一个覆盖来纠正按钮图标对齐问题。

<style>
.ui-dialog-titlebar-close .ui-icon-closethick {
    position: relative !important;
    margin-top: -1px  !important; 
    margin-left: -8px  !important;
} 
</style>