JQuery对话框和Safari

Question

在Safari中使用jquery对话框时（版本10.0.1（12602.2.14.0.7））

我在对话框中间出现水平线。我查看了CSS和生成的HTML，我看不出任何理由。在同一系统上运行Firefox（版本52.0a2（2016-12-10）（64位））不会出现此行为。

我使用jquery 2.2.1与UI，tablesorter，datetimeentr，输入掩码，多个和jqwidgets

我还没有修改过CSS ......这只是对话框设置。

＆＃13;

＆＃13;

$("#login").dialog({
  modal: true,
  draggable: true,
  resizable: false,
  position: {
    my: "center",
    at: "center",
    of: window
  },
  show: "blind",
  hide: "blind",
  height: 208,
  width: 204,
  dialogClass: "ui-dialog-osx",
  buttons: {
    "Login": function() {
      $(this).dialog("close");
      $("#frmlogin").submit();
    }
  }
});

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-osx ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" aria-describedby="about" aria-labelledby="ui-id-1" style="height: auto; width: 264px; top: 368px; left: 535px; display: block;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle"><span id="ui-id-1" class="ui-dialog-title">About</span><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" title="Close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span></button></div><div id="about" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 126px;">
<p style="text-align:center;line-height:20px;">
Timekeeper, Version 2.0<br>
from <strong>Syberdyne Systems Ltd</strong><br>
licensed to </p><div id="cmpyname" style="text-align:center;font-weight:bold;padding:0 0 0 0;margin:0 0 0 0;">Syberdyne Systems Ltd.</div>    
   <p></p> 
</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Ok</span></button></div></div></div>

＆＃13;

＆＃13;

＆＃13;

编辑后，相同的代码不会出现问题，但它在我的系统上运行...它必须与CSS相关。

[2016年11月11日编辑]使用Safari网络检查器我删除了所有的CSS并离开了jquery-ui-min.css＆＃39;，我仍然通过对话框得到了这些内容：< / p>

Answer 1

问题的原因在于CSS类定义：

    .ui-widget-content {
      border: 1px solid #777;
      background: #eee url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") repeat-x;
      color: #333
    }

将其更改为：

    .ui-widget-content {
      border: 1px solid #777;
      background: #eee repeat-x;
      color: #333
    }

解决了问题。