我正在开发一个浏览器扩展程序,将其UI添加到页面DOM中。在某些页面上我遇到问题,某些样式会影响我的UI。为了解决这个问题,我将UI放在一个公共根目录下,将大多数样式重置为默认值。
有时候我错过了导致UI出现视觉故障的事情。 (即页面CSS文件设置form { width: 80%; }
所以我需要将form { width: auto; }
添加到我的重置样式。
是否有一组样式会将每个CSS属性重置为每个元素标准声明为默认值的值?
答案 0 :(得分:3)
HTML5 Doctor CSS Reset
(扩展Eric Meyer的一个以改进HTML5标签重置)Yahoo! (YUI 3) Reset CSS
(基于Normalize.css)通用选择器
‘*’
重置- 醇>
Normalize.css
1.02.1.3
(“......用于 Twitter Bootstrap , HTML5 Boilerplate , YUI 3 ,Pure,TweetDeck,Soundcloud,Medium ,NASA,GOV.UK,Guardian,Rdio,Favstar,iA等等。“)
还有其他人,但这是(现在仍然是)2012’s most popular CSS Reset scripts。
答案 1 :(得分:2)
我遇到了同样的问题。其他答案列出的常规CSS规范化器无法回答问题,因为这样做是为了消除浏览器默认样式之间的差异。
在扩展程序中,我需要取消随机网站上可能存在的每种特定样式。
我遇到过这种解决方案(我不确定7年前提出这个问题时是否有可能)。
.your-container-class,
.your-container-class *,
.your-container-class *::before,
.your-container-class *::after {
all: initial;
}
到目前为止,通过消除各个网站之间的差异似乎可以达到目标。缺点是,它甚至会重置一些默认样式(例如ol
,ul
,li
的行为不像列表一样)。
答案 2 :(得分:0)
我建议使用快速Google搜索来查找类似的内容:http://meyerweb.com/eric/tools/css/reset/
您可以按原样实施重置,如果出现任何问题,只需根据需要添加即可。
请注意,一些预先制作的CSS重置需要大声使用它们。
答案 3 :(得分:0)
是的,绝对。
这有两种思想流派。一个是归零样式重置表,它基本上从css中删除所有边距,填充和其他此类设置。一个很好的例子是Eric Meyer's Reset CSS
另一种方法是将所有内容设置为您理解的预期,为段落和标题设置合理的边距,缩进列表等。这方面的一个很好的例子是Normalize.css
某些浏览器还支持initial
值,该值将属性的值设置回原来的值。它没有被广泛支持,足以在生产中使用,IMO。
答案 4 :(得分:-1)
Html5样板有一个normalize.css,它将很多css样式设置为默认值。 http://html5boilerplate.com/
答案 5 :(得分:-1)