在 jquery ui 对话框中对齐标题和关闭文本不起作用 IE7 和 6



我正在尝试在jQuery对话框标题栏中将标题文本左对齐并向右关闭文本。它适用于我测试过的所有浏览器,除了 IE6 和 7。在 IE6/7 中,关闭文本右对齐,但在标题文本下方显示一行,并且位于对话框的标题栏之外,因此不可见。见下图:https://docs.google.com/document/d/1B-syu0IiTh27kb4D9nXhfZkpjACgZnOWIPDhOTRdMWQ/edit

这是我使用的一些代码

/**IE 7 has a ui dialog positioning issue with jquery UI 1.8 above , the below seems to solve it **/
.ui-dialog{ position: absolute;  width: 100%;}

.ui-icon  
{
  background-image: url("") !important; 
  text-align: right;
}
.ui-dialog-title-dialog 
{
  float: left;
}
.ui-dialog-titlebar-close
{
  font-size: 16px;
  float: right;
}
.ui-dialog-title
{ 
  font-size: 16px;
  padding: 4px;
  padding-right: 50px;
}
.ui-dialog-titlebar
{
  padding: 4px;
  background-color : #FFF;
}
$("#dialog").dialog({ autoOpen: false, width: area.width, height: area.height, modal: true, closeText: "閉じる", title: '<a href="#" id="hideAll">説明を非表示</a> ' });

我根据对话框的宽度使用一些jquery和填充解决了这个问题。不是最好的解决方案,但它有效。

$('.ui-dialog-title').css("padding-right", (dialog.width - closeTextWidth) + "px");

最新更新