jQuery UI 对话框边框不再在 1.12.1 中工作

Posted 2023-05-08

【中文标题】jQuery UI 对话框边框不再在 1.12.1 中工作

【英文标题】：jQuery UI Dialog border not working in 1.12.1 anymore

【发布时间】：2017-04-25 00:50:39

【问题描述】：

到目前为止，我使用的是 jQuery UI 1.11.4，并且在我的 Web 应用程序中，我显示了一些用于多个操作、信息等的对话框小部件。我使用以下 CSS 样式强制它们具有细的蓝色边框，效果很好：

.ui-dialog 
  border: 2px solid #0000FF;
  padding: 0px;

今天，我切换到 jQuery UI 1.12.1，并且不再显示边框...我分析了 1.11.4 和 1.12.1 Dialog 之间的区别，我看到的唯一主要区别是旧版本有一个额外的

display: block;

以其风格，因此我尝试将其添加到我自己的风格中。没有效果...边框消失了。

当然，我在提问之前先对我的问题进行了研究 - 没有成功...here 描述的解决方案也不起作用。

有人知道这个问题吗？

【问题讨论】：

我当然可以提供帮助，但我需要能够检查。要么使用最少的所需代码在此处重现您的问题，要么提供一个链接，概述一组清晰的说明，说明您在页面中谈论的确切位置。问候，

您好 Andrei，我将尝试设置两个简单的示例页面，一个使用 jQuery UI 1.11.4，另一个使用 1.12.1。我希望我可以在那里重现该问题，并将链接发送给您。但是，我要到星期一才有时间这样做。提前感谢您的观看，祝您周末愉快！

两者都不需要，只要我了解您的需求即可。这是一个小问题，但由于误解，我想清除任何来回。通常一个 1.12.1 版本的链接就足够了。如果没有，我会询问详细信息。周末愉快。

【参考方案1】：

看看他们的示例页面，应该这样做，只要你的css 在jquery-ui.css 之后加载：

.ui-widget.ui-widget-content 
  border: 2px solid #0000FF;
  padding: 0;

如果您的自定义样式表在 jquery-ui.css 之前加载（这是错误的 - 它应该是页面中加载的最后一个样式表，因此您可以使用具有相同特性的选择器轻松覆盖现有 CSS）您将需要一个稍强的选择器：div.ui-widget.ui-widget-content。

这仅适用于您尚未自定义 jquery-ui 小部件的默认标记并且您没有其他带有更强选择器的代码 sn-ps 影响我们尝试设置样式的元素的情况。

【讨论】：

非常感谢，我的问题解决了！当然，我在 jQueryUI css 之后加载了我自己的 css，但是我使用的选择器 .ui-dialog 似乎不够强大，无法在 jQuery UI 1.12.1 中显示边框（在 1.11.4 中有效）。 .ui-widget.ui-widget-content 完成了这项工作。