简体繁体 English

如何防止 CSS 重置影响特定内容？

[英]How can I prevent a CSS reset from affecting specific content?

原文 2012-04-04 16:43:45 1 3 css

I'm using meyerweb css reset.我正在使用 meyerweb css 重置。 It works fine, but it resets all default styles, which is in the body and template structure ( <body> , sidebars, etc...) or in the main content (articles)它工作正常，但它重置所有默认值 styles，它在正文和模板结构（ <body> ，侧边栏等...）或主要内容（文章）中

It's a big problem!这是个大问题！ because I've styled my text in the editor ( TinyMCE ), but on the main page, it loses all of the styles, such as strong , italic or (un)ordered lists.因为我在编辑器 ( TinyMCE ) 中设置了文本样式，但在主页上，它丢失了所有 styles，例如strong 、 italic或 (un)ordered 列表。

How can I solve it?我该如何解决？ Can I tell the browser to reset all except elements which are in a table or div with a specific class or ID (such as #content )?我可以告诉浏览器重置表或 div 中具有特定 class 或 ID（例如#content ）的所有元素吗？

Thanks.谢谢。

3 个解决方案

You ran across one of the downsides of using reset sheets, in that they reset everything.您遇到了使用重置表的缺点之一，因为它们会重置所有内容。

You may want to consider using an alternative to full resets, such as normalize.css .您可能需要考虑使用完全重置的替代方法，例如normalize.css 。 The idea behind this is that instead of having all browsers start off at a clean slate, get all of them to the same baseline.这背后的想法是，与其让所有浏览器从头开始，不如让所有浏览器都达到相同的基线。 From the website:来自网站：

What does it do?它有什么作用？

Preserves useful defaults, unlike many CSS resets.保留有用的默认值，与许多 CSS 重置不同。

Normalizes styles for a wide range of HTML elements.将 styles 标准化为广泛的 HTML 元素。

Corrects bugs and common browser inconsistencies.更正错误和常见的浏览器不一致。

Improves usability with subtle improvements.通过细微的改进提高可用性。

Explains what code does using detailed comments.使用详细注释解释代码的作用。

This may (or may not) work better for you than the Meyer reset.这可能（或可能不会）比 Meyer 重置更适合您。

The best way to go about this, in my opinion, would be to re-define the styles after the reset as opposed to removing them from the reset. go 的最佳方法，在我看来，是在重置后重新定义 styles，而不是将它们从重置中删除。 While you shouldn't see any issues with the elements defined above, removing things like ul and li definitions can result in very inconsistent behavior across browsers.虽然您不应该看到上面定义的元素有任何问题，但是删除 ul 和 li 定义之类的东西可能会导致浏览器之间的行为非常不一致。 Redefining these elements post-reset will ensure uniformity across browsers.在重置后重新定义这些元素将确保跨浏览器的一致性。

Use http://CSSesta.tk使用http://CSSesta.tk

[It's influenced by YUI, Eric Meyer & Boilerplate but it doesn't interfear with any typical styling aspects] [它受到 YUI、Eric Meyer 和 Boilerplate 的影响，但它不会干扰任何典型的样式方面]

It has 6 options commented out.它有 6 个选项被注释掉了。 (You only need to amend at least opt 3) you can leave change the others if necessary, the rest should be as expected (in general) unless you're making a website that turns into a car.(Things like forcing vertical scroll, line height, font-size are to your discretion) （您只需要至少修改选项 3）如果需要，您可以更改其他选项，rest 应该符合预期（通常），除非您正在制作一个变成汽车的网站。（例如强制垂直滚动，行高、字体大小由您自行决定）

The HTML5 elements in CSSesta are more up-to date "currently" than Eric Meyers & will probably become the most frequently maintained reset sheet, I know this because I will be updating it. CSSesta 中的 HTML5 元素“当前”比 Eric Meyers 更新，并且可能会成为维护最频繁的重置表，我知道这一点是因为我会更新它。

(Try it, & if you get any problems let me know I'll look at your default one and meet it in between) （试一试，如果你遇到任何问题，请告诉我，我会查看你的默认设置，并在两者之间进行调整）