右側按鈕我創建了一個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這種風格， –