jQuery UI CSS使Firefox中的對話框內容不同於Chrome

我有一個jQuery對話框的代碼片段，它在Firefox和Chrome中的呈現方式不同。我知道這是一個CSS問題，我認爲這個文檔指定了ui-dialog-content和ui-widget-content會負責，但我顯然是誤解了一些東西。jQuery UI CSS使Firefox中的對話框內容不同於Chrome

的例子是：

<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內容類，但無濟於事。有人可以提出建議嗎？

謝謝。

來源

2010-11-08 jnash

我通過使用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;}

我希望這樣可以節省別人幾分鐘。

來源

2010-11-09 14:44:33 jnash

jQuery UI CSS使Firefox中的對話框內容不同於Chrome

回答

相關問題