我有一个 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。
我试图超越 UI 内容类，但无济于事。有人可以提出建议吗？
谢谢。
最佳答案
我通过使用 Chrome 的开发者工具和 Firefox 的 Firebug 工具找到了答案。 jQuery UI 主题覆盖了一些设置。在显示 jQuery UI 对话框后，通过研究每个元素的有效样式，我能够识别被覆盖的 CSS。
我用来校正对话框内容文本、输入和选择字段的显示的 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;}
我希望这可以节省一些人的时间。
关于javascript - jQuery UI CSS 使 Firefox 与 Chrome 中的对话框内容不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4125216/