JQuery 对话框和 Safari

Question

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

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

我正在使用带有 UI、tablesorter、datetimeentr、输入掩码、multiple 和 jqwidgets 的 jquery 2.2.1

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

$("#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();
    }
  }
});

<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>

编辑后，相同的代码没有出现问题，但在我的系统上确实出现了......它必须与 CSS 相关。

[2016 年 11 月 12 日编辑] 使用 Safari 网络检查器，我删除了所有 CSS，只留下了“jquery-ui-min.css”，我仍然可以通过对话框获得这些行：

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
    }

解决了问题。