html - 防止 meyer 重置 css 弄乱动态内容

Question

我在我的网站上实现了 Eric Meyer 的 reset.css，效果很好，但这是一个小问题。因此，CMS 用户可以根据需要自由设置文章内容的格式，而重置的 CSS 会重置其文本的格式。

有什么想法可以防止 reset.css 继承传播到动态内容？

您输入的所有内容都非常受欢迎。

score 4 · Accepted Answer

它总是会传播（这就是 reset.css 的重点:)），但如果你还没有这样做，你当然应该确保 reset.css 是页面中链接的第一个样式表 - 任何自定义样式然后将覆盖重置样式。

如果问题是样式“过于重置”并且您希望为您的动态内容设置更合理的默认设置（例如加权字体大小、边距、行高等），您可以创建自己的基线 CSS 样式和例如，使用 ID 选择器仅将它们应用于动态内容区域。

score 3 · Accepted Answer

正如 Eric Meyer 本人在他的CSS 重置页面上所说：

这里给出的重置样式是故意非常通用的。例如，没有为 body 元素设置任何默认颜色或背景。我不特别建议您在自己的项目中以未更改的状态使用它。它应该被调整、编辑、扩展或以其他方式调整以匹配您的特定重置基线。为页面、链接等填写您喜欢的颜色。

换句话说，这是一个起点，而不是一个自成一体的无接触黑匣子。

从外观上看，您会发现 CSS 重置对您来说有点过分了。因此，我会针对您遇到问题的项目对其进行调整。例如，当您遇到表格问题时，我会删除以表格为目标的 CSS 重置部分，从而将其保留为浏览器默认设置，或者在重置后添加您自己的额外 CSS 以专门设置您自己的表格样式方法。

score 2 · Accepted Answer

我遇到过这样的问题，我的解决方案是将所见即所得编辑器生成的动态内容包装到具有唯一类的 div 中，在该类中我创建了具有标准属性的重置样式表！

前任。：

div.wrap_to_prevent {风格，风格，风格}

div.wrap_to_prevent 输入，

div.wrap_to_prevent textarea,

div.wrap_to_prevent h1 {样式，样式，样式}

.

.

ETC

基本上，我使用了一个重置样式表，但在所有 css 样式之前加上我的 div 的类，这样，它只会影响该 div 内的代码，从而为该内容创建一组全新的规则。

由于我 90% 的项目使用 WYSIWYG 编辑器，因此通过这个解决方案，我能够解决同样的问题......

不知道这是否适合你，但试一试！！

score 0 · Accepted Answer

如果您需要使用 css 重置，解决此问题的唯一可靠方法是将iframe元素用于动态内容。s的主要问题iframe是它们不能根据内部文档的大小自动调整高度。如果你能解决这个问题，我会说这是最轻松的方法。

score 0 · Accepted Answer

Does the CMS create inline styles? If so these should override the styles from the reset.css file.

If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.

5 回答 5