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>

- bart2puck

---

你能展示一下它的位置吗？可以用图片或者最好是 http://jsfiddle.net。 - Rory McCrossan

需要提供一个JSFiddle或更多的代码以便进一步协助。 - Kevin Lynch

看起来不错 http://jsfiddle.net/j08691/pP5Vs/ - j08691

这是我看到的... http://i961.photobucket.com/albums/ae97/bart2puck/offcenterx_zpsd00af76b.jpg - bart2puck

你得到答案了吗？ - scrowler

Answer 1

我曾经遇到过这个问题，当时我的jQuery UI脚本和CSS主题版本不同。在我的情况下，我正在升级jQuery UI，没有考虑到需要更改样式表。

我的建议是重新打包整个文件并从头开始，或者在ThemeRoller中找到您通常使用的主题，并用该样式表替换您的UI CSS。

- scrowler

---

你知道我可以在哪里获取版本列表吗？ 我正在使用jquery-ui的1.10.2版本。 - bart2puck

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>

- Brad Jones