jQuery UI CSS отличает содержимое диалогов в Firefox от Chrome - PullRequest
Новая
       3

jQuery UI CSS отличает содержимое диалогов в Firefox от Chrome

0 голосов
/ 08 ноября 2010

У меня есть фрагмент кода диалога jQuery, который по-разному отображается в Firefox и Chrome. Я знаю, что это проблема CSS, и я думал, что в документации указано, что ответственность за это несут ui-dialog-content и ui-widget-content, но я явно что-то неправильно понимаю.

Пример: 

<html>
<head>
 <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" /> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
 <style>
  body {font-size: 8pt; font-weight: normal;}
  span {font-size: 8pt; font-weight: normal;}

  .ui-dialog-content {font-weight: normal; }
  .ui-widget-content {font-weight: normal;}
 </style>
</head>
<body>
 Sample text at 8pt...<br/>
 Line 1:<br/>
 Line 2:<br/>
 Line 3:<br/>
 <input type="button" value="show" onclick="$('#divTest').dialog()"/>
 <div id="divTest" style="width: 700px; height: 400px; display: none;" title="Test">
   Why is this text bold?<br/>
   Line 1:<br/>
   Line 2:<br/>
   Line 3:<br/>
 </div>
</body>
</html>

В Firefox я нахожу содержимое диалога жирным шрифтом, что нежелательно. В Chrome я нахожу контент с нормальным лицом, но межстрочный интервал был увеличен примерно до 2.

Я пытался перегрузить классы контента интерфейса, но безрезультатно. Может ли кто-нибудь сделать предложение?

Спасибо.

1 Ответ

2 голосов
/ 09 ноября 2010

Я нашел ответ, используя инструменты разработчика Chrome и инструмент Firebug Firefox. Темы пользовательского интерфейса jQuery имеют приоритет над некоторыми настройками. Я смог определить CSS, который был переопределен, изучив эффективные стили для каждого элемента после отображения диалогового окна jQuery UI.

CSS, который я использовал для исправления отображения текста содержимого диалога, а также полей ввода и выбора: 

.ui-widget input, .ui-widget select {font-family: arial; padding: 0px 0px;}
.ui-dialog-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt; }
.ui-widget-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt;}

Надеюсь, это сэкономит кому-то несколько минут.

...