Telerik UI 干扰了自己的样式答案

【问题标题】：Telerik UI interfering with its own stylesTelerik UI 干扰了自己的样式
【发布时间】：2017-04-17 18:11:31
【问题描述】：

所以在我当前的项目中，我们在过去几周遇到了一个特别有害的问题：Telerik RadWindow 样式不再正确渲染。边框周围似乎有一些额外的空间，窗口图标与左上角齐平，并且存在标题栏按钮，但它们的图标是不可见的。我们在使用 RadAlert 和 RadWindow 时遇到了完全相同的问题。我的队友也在使用 Firefox 和 IE，他们也遇到了完全相同的问题。

但是：此问题并未出现在所有页面上。 RadWindows 在给定页面上看起来是否正常始终与该页面一致。早些时候我注意到，在窗口正确显示的地方，Chrome 每次都在下载一个新的样式表，尽管禁用缓存并没有改变任何东西。

我注意到用于错误样式表的 URL 与正常的不同。我分解了查询字符串进行比较，_TSM_CombinedScripts_ 参数给出了不同的公钥标记。开始时它们实际上是相同的，但到最后它们完全不同。

normal:

d=d_7ijIXc06Eqg7xyrMT_AE_WxZL3XaVJz_VwsvOdK_1ssgHIAGoqaJzPVn-aFQFJVakZqv0a6M6IUW8lKaDBl-g9FohhCb-0KC2Mu14d6L4y47PrZb-wQiVUGqaxwCy7qcc2Dw2
t=635823632443834005
compress=1
_TSM_CombinedScripts_=
    ;;Telerik.Web.UI, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:cd668efa-682a-4e93-b784-26f0724f247c:92753c09:ed2942d4:580b2269:8cee9284:a3b7d93f:9e1572d6:aac1aeb7:1c2121e:4d471440:c86a4a06:45085116
    ;Telerik.Web.UI.Skins, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:a1fec5ec-d336-48a8-850e-06eaadf10400:62641802:f82ffad1:9db7724d:fa319bc5:226a649d:51352d27:8b77daa8:976fe3c:f144572

buggy:

d=d_7ijIXc06Eqg7xyrMT_AE_WxZL3XaVJz_VwsvOdK_1ssgHIAGoqaJzPVn-aFQFJVakZqv0a6M6IUW8lKaDBl-g9FohhCb-0KC2Mu14d6L4y47PrZb-wQiVUGqaxwCy7qcc2Dw2
t=635823632443834005
compress=1
_TSM_CombinedScripts_=
    ;;Telerik.Web.UI, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:cd668efa-682a-4e93-b784-26f0724f247c:92753c09:ed2942d4:580b2269:1c2121e:9e1572d6:45085116
    ;Telerik.Web.UI.Skins, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:a1fec5ec-d336-48a8-850e-06eaadf10400:62641802:f82ffad1:9db7724d:8b77daa8:226a649d

至于实际的错误，我做了一点检查，我发现样式表实际上覆盖了它自己的样式。我通过格式化程序运行 Telerik.UI.Webresource.axd 返回的样式表，第 216 行定义了几个规则：

.RadWindow .rwCloseButton {
    background-position: -90px 0
}

.RadWindow .rwCloseButton:hover {
    background-position: -90px -21px
}

然后在第 4634 行覆盖它们。有缺陷的样式表总共有大约 2600 行额外的行。奇怪的是，这些新规则也将常规关闭按钮样式应用于非活动窗口中的悬停关闭按钮。

.RadWindow .rwCloseButton,
.RadWindow.rwInactiveWindow .rwCloseButton:hover {
    background-position: -1px -762px
}

.RadWindow .rwCloseButton:hover {
    background-position: -21px -762px
}

在窗口正确显示的页面上，仅应用前两个规则，而第二组规则永远不会出现。我只是不明白它是如何将样式组合在一起的，或者为什么它会覆盖自己。

据我所知，没有任何引用被更改。什么都没有升级，web.config 没有改变。我们在本地环境和开发盒中都看到了同样的问题。

【问题讨论】：

您使用的是已声明的皮肤吗？例如。皮肤=“地铁”？
我们有几个带有皮肤属性的 RadAjaxLoadingPanel，但除此之外，没有。我们母版页中的 RadWindowManager 没有。
实际上，在检查了 Web.config 之后，我们确实在 appSettings 中声明了一个。但是，删除它后，我仍然看到相同的行为，只是使用默认皮肤。
我要说的是，看起来可能有两种不同的皮肤在为 RadWindow 设置样式而互相争斗。
尝试为 RadWindowlike Metro 添加皮肤，然后检查窗口 CSS，不包含“RadGrid_Metro”类的规则是有问题的。

标签： css webforms webresource.axd telerik-ajax telerik-window

【解决方案1】：

要么从所有 RadWindows 中删除 RenderMode="Lightweight"，要么确保所有 RadWindows 都有它来解决问题。

原来问题是我们的一位团队成员在几页中添加了一些带有RenderMode="Lightweight" 的 RadWindows。据推测，加载的第二个样式表实际上是用于轻量级模式的。这就是文档告诉您不要混合渲染模式的原因。

【讨论】：