右侧按钮我创建了一个jQuery Dialog如本Demo。它工作正常。关闭按钮显示在那里的右侧。但在我的网站上，在本地主机上运行，关闭按钮显示在左侧，如下图所示。显示关闭在jQuery的对话框
我怎样才能解决这个问题？
关闭按钮样式
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>
的区别你example files和jsFiddle demo之间的的的jsfiddle包括jQueryUI的主题，其正在向<button>添加一些CSS规则。
通过添加任何jQueryUI的主题，您的演示，它可以解决这个问题。例如，其中包括：
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel='stylesheet' />
添加样式：
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
包括position: absolute。如果没有position，我在其他问题Hide Title bar and Show Close Button in jQuery Dialog加入right: 0没有任何效果，这解释了为什么按钮左侧出现，因为这是很自然地就会出现在正常流动。
所以，如果你使用的不是jQueryUI theme，那么你需要添加position: absolute到关闭按钮规则，就像这样：
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: 0;
}
一种可能性 - 的样式发生冲突。检查您的html和CSS文件中的left:（或right:）CSS属性。我觉得样式类 -
.ui-dialog .ui-dialog-titlebar-close
是相互矛盾的。
编辑：
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0;
overflow:visible;
}
.ui-dialog .ui-dialog-titlebar {
background:transparent;
border:none;
}
.ui-dialog .ui-dialog-title {
display:none;
}
.ui-dialog .ui-dialog-titlebar-close {
left:0;
}
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane { border-width: 0 !important; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer;
}
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
cursor: move;
}
.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 150px;
border-style: solid;
border-width: 10px;
}
.ui-resizable-handle.ui-resizable-s::before {
border-color: #aaa transparent transparent transparent;
top: 2px;
}
.ui-resizable-handle.ui-resizable-s::after {
border-color: #fff transparent transparent transparent;
top: 1px;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#open').click(function() {
$('#dialog').dialog('open');
});
$(document).ready(function() {
$('#dialog').dialog({
autoOpen: false,
resizable: true,
width: 300,
height: 'auto',
buttons: {
"Save": function() {
}
}
});
});
});//]]>
</script>
</head>
是css，ü需要改变:)
在你的电脑？或者在你的网站上？ –
在我的网站上运行本地主机:) – Bishan
@bishan，改变这个.ui-对话框.ui-dialog-titlebar-close from right：0;到左：0;，解决了小提琴的问题，所以它可能是，一些其他的CSS /样式overwritting这种风格， –