Question

在过去的几年里，我一直在开发Eric Meyer's CSS resets的网站。我喜欢它，永远不会回头。我甚至都没想过要回头看。但是今天，我们实施了Telerik Rad Editor控件。不幸的是，CSS重置也会破坏Rad Editor的内部布局。有没有办法阻止重置级联到Rad Editor。

提前致谢。

Answer 1

我们在应用程序中广泛使用RadEditor，并发现了类似的问题。我已经用编辑器CSS代码工作了将近2年，并且发现解决这些问题相当容易。

首先，您是否为编辑器使用自定义皮肤？这是克服这些问题的最佳方法。如果不是，您可以通过复制现有主题并重命名来添加一个。这将允许您修改外部文件中的CSS，而不是试图改写覆盖Telerik程序集中嵌入的样式表。

在那之后，分离哪些样式导致问题将是一个简单的问题。我猜你的评论是按钮没有正确渲染，很可能是因为你的重置样式表覆盖了默认的列表样式。我会使用firebug来查看重置文件覆盖样式表中定义的样式的位置。

很可能是因为对于正在重置的事物根本没有样式定义，因为Telerik样式表中定义的任何内容都比重置样式更具体，因为它们将包含一个前面的类名，这将增加CSS特异性为10.

如果你能提供更多细节，我很乐意尝试提供更多帮助。

Answer 2

很难，因为CSS中没有“排除”语句。您必须重新引入重置样式表删除的内容。

但是根据经验，我很确定搞砸的原因只有一两件事情出错。可以在合理的时间内检查和修复它们。

Answer 3

您可以使用 iframe 来描绘CSS上下文。但是，这会让事情变得更难。

Answer 4

否即可。这是CSS重置的固有问题之一。

这是 $ 1000 控件？！也许您应该给他们打电话并请求使其与CSS重置兼容。

重置使得Transitional HTML中的一些弃用属性无法使用，但“业界最佳”编辑器不应该依赖于这些属性。其他所有东西都可用适当的样式表来修复。

Answer 5

实际上，您可以为RAD编辑器指定特定的CSS文件，以便在加载时引用。只需创建一个CSS文件，它可以添加重置所带来的内容，只有RAD编辑器会引用该CSS文件。

例如，当编辑器加载到页面上时，此编辑器将放弃一个名为“radEditor.css”的特定文件。

<telerik:RadEditor ID="RadEditor1" runat="server" AllowScripts="True">
  <Content>
  </Content>
  <CssFiles>
    <telerik:EditorCssFile Value="~/css/radEditor.css" />
  </CssFiles>
</telerik:RadEditor>

祝你好运，并希望这有助于一些人。

Answer 6

如果您正在尝试制作样式，那么从您开始使用的元素可以引用一种流行的浏览器默认样式表 - 例如here's the WebKit one for HTML。我从标记中假设您可以将其缩小到几个元素？

修改：Here's the Gecko one。

Answer 7

您可以找出该元素的默认值（仅使用该元素制作无样式页面并使用Firefox的DOM Inspector进行检查），然后在样式表的末尾再次添加规则，并添加!important每一条规则。

Answer 8

我只是在这里添加这个以供参考。 Twitter Bootstrap使大多数按钮消失。这是修复。 EditorCssFile仅用于将编辑器的背景颜色更改为白色。

<style type="text/css">
    .telerik img {
       max-width:none;
    }       
</style>

<div class="telerik">
    <telerik:RadEditor ID="RadEditor1" BackColor="White" ToolbarMode="RibbonBar" runat="server">
        <CssFiles>
            <telerik:EditorCssFile Value="/assets/css/editorContentArea.css" />
        </CssFiles>
    </telerik:RadEditor>
</div>

仅在HTML的某个部分内阻止CSS重置

8 个答案: