JQuery и диалоговые окна Safari

Question

При использовании JQuery диалогов в Safari (версия 10.0.1 (12602.2.14.0.7))

Я получаю горизонтальные линии, появляющиеся на полпути через диалоговые окна. Я посмотрел на CSS и сгенерированный HTML, и я не вижу причин для этого. Запуск Firefox (версия 52.0a2 (2016-12-10) (64-разрядный)) в той же системе не проявляет такого поведения.

Я использую JQuery 2.2.1 с пользовательским интерфейсом, TableSorter, datetimeentr, маски ввода, неоднократный и jqwidgets

Я не изменил 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 связаны между собой.

[11/12/2016 Edit] Использование 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 
    } 

Исправлена ​​ошибка.