防止 CSS 仅在 HTML 的特定部分内重置
在过去的几年里，我一直在使用 Eric Meyer 的 CSS 重置 来开发网站。我喜欢它并且永远不会回头。我什至没有想过回头看。但今天，我们实现了 Telerik Rad Editor 控件。不幸的是，CSS 重置也破坏了 Rad 编辑器的内部布局。是否有某种方法可以防止重置级联到 Rad 编辑器中。
提前致谢。
For the past few years, I've been developing sites with Eric Meyer's CSS resets. I love it and will never look back. I never even thought of looking back. But then today, we implemented a Telerik Rad Editor control. Unfortunately the CSS resets break the internal layout of the Rad Editor as well. Is there some way to prevent the resets from cascading down into the Rad Editor.
Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
我们在应用程序中广泛使用 RadEditor，并发现了类似的问题。我已经使用编辑器 CSS 代码工作了近 2 年，并且发现克服这些问题相当容易。
首先，您是否为编辑器使用自定义皮肤？这是克服这些问题的最佳方法。如果不是，您可以通过复制现有主题并重命名来简单地添加一个主题。这将允许您修改外部文件中的 CSS，而不是尝试覆盖嵌入在 Telerik 程序集中的样式表。
之后，只需简单地找出导致问题的样式即可。我从您的评论中猜测按钮未正确呈现，很可能是因为您的重置样式表覆盖了默认列表样式。我将使用 firebug 来查看重置文件在何处覆盖样式表中定义的样式。
最有可能的是因为正在重置的内容根本没有样式定义，因为 Telerik 样式表中定义的任何内容都会比重置样式更具体，因为它们将包含前面的类名称，这将通过以下方式增加 CSS 特异性： 10.
如果您能提供更多具体信息，我很乐意提供更多帮助。
We use the RadEditor extensively in our application, and have found similar issues with it. I've been working with the editor CSS code for almost 2 years now, and have found it to be fairly easy to overcome these issues.
Firstly, are you using a custom skin for the editor? This is the best way to overcome these issues. If you aren't you can simply add one by copying an existing theme and renaming it. This will allow you to modify the CSS in an external file, rather than trying to fiddle with overriding the stylesheet the is embedded in the Telerik assembly.
After that, it's going to be a simple matter of isolating which styles are causing the issues. I'm guessing from your comments that the buttons are not rendering correctly, most likely because your reset stylesheet is overriding the default list styles. I would use firebug to see where the reset file is overriding styles defined in the stylesheet.
Most likely it's because there is no style definition at all for things that are being reset, as anything defined in the Telerik stylesheets would be more specific than the reset styles, as they would contain a preceeding class name, which would increase the CSS specificity by 10.
If you could provide more specifics, I'd be happy to try to help more.
几乎没有，因为 CSS 中没有“排除”语句。您必须重新引入重置样式表删除的内容。
但根据经验，我很确定失败的原因只是一两件事出了问题。可以在合理的时间内检查并修复它们。
Hardly, as there are no "excluding" statements in CSS. You would have to re-introduce the things the reset stylesheet removes.
But from experience, I'm quite sure the reason for the screwup is just one or two things going awry. It may be possible to examine and fix them in reasonable time.
您可以使用 iframe 来描述 CSS 上下文。但是，这让一些事情变得更加困难。
You could use an iframe to delineate the CSS contexts. But, it makes some things harder.
不。这是 CSS 重置的固有问题之一。
这是一个 1000 美元 的控件？！也许您应该给他们打电话并请求使其与 CSS 重置兼容。
重置会使 Transitional HTML 中的一些已弃用的属性无法使用，但“业界最佳”编辑器不应该依赖这些属性。其他一切都可以通过适当的样式表修复。
No. That's one of inherent problems with CSS reset.
That's a $1000 control?! Perhaps you should give them a call and request making it compatible with CSS reset.
Reset makes some deprecated attributes from Transitional HTML unusable, but "industry's best" editor shouldn't be relying on these. Everything else is fixable with appropriate stylesheet.
实际上，您可以指定特定的 CSS 文件供 RAD 编辑器在加载时引用。只需创建一个 CSS 文件，添加重置删除的内容，然后只有 RAD 编辑器才会引用该 CSS 文件。
例如，当该编辑器加载到页面上时，它会引用一个名为“radEditor.css”的特定文件。
祝你好运，希望这对一些人有帮助。
Actually, you can specifiy specific CSS files for the RAD Editor to reference when it loads up. Just create a CSS file that adds in what the reset takes away and only the RAD Editor will reference that CSS file.
For example this editor will refence a specific file called 'radEditor.css" when it loads on a page.
Good luck, and hope this helps some.
您可以找出该元素的默认值（制作一个仅包含该元素的无样式页面并使用 Firefox 的 DOM Inspector 检查），然后使用
!important在样式表末尾再次添加规则添加到每条规则中。You can find out what are the default values for the element (make an unstyled page with only the element and check with Firefox's DOM Inspector), then add the rules again at the end of your stylesheet with
!importantadded to every rule.如果您想确定元素开头的样式，您可以参考流行浏览器的默认样式表之一 - 例如， 这是 HTML 的 WebKit。我想从标记中你可以将其范围缩小到只有几个元素？
编辑：这是 Gecko 。
If you're trying to work out the styles the elements started with you could refer to one of the popular browser's default stylesheets - for example, here's the WebKit one for HTML. I presume from the markup you can narrow it down to just a few elements?
Edit: Here's the Gecko one.
我只是在这里添加这个以供参考。 Twitter Bootstrap 使大部分按钮消失。这是修复方法。 EditorCssFile 只是用于将编辑器的背景颜色更改回白色。
I'm just adding this here for reference. Twitter Bootstrap makes most of the buttons disappear. Here is the fix. The EditorCssFile is just used to change the background color of the editor back to white.