gpt4 book ai didi

javascript - jQuery UI CSS 使 Firefox 与 Chrome 中的对话框内容不同

转载 作者:太空宇宙 更新时间:2023-11-04 05:28:48 25 4
gpt4 key购买 nike

我有一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com