浏览器差异问题一直是前端的开发难点。
(1)默认样式
default style sheet、user agent stylesheet、built-in stylesheet
学习HTML/CSS首先要理解,各浏览器对标签预先都设定了不一样的默认CSS。
比如:
大部分浏览器会把链接显示成蓝色,把点击过的链接显示成紫色。
但不同浏览器不同版本默认显示h1的字体大小是不一样的。
还有最为明显的是很多元素的margin和padding是有很大区别。
世界上第一张网页:
https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
IE11渲染效果:
Chrome52.png渲染效果:
Firefox59.png渲染效果:
其实这个在CSS规范里也有详细的记述:
CSS 1规范:https://www.w3.org/TR/CSS1/#basic-concepts
引用
Each User Agent (UA, often a "web browser" or "web client") will have a default style sheet that presents documents in a reasonable -- but arguably mundane -- manner.
CSS 2规范:https://www.w3.org/TR/CSS21/cascade.html#cascade
引用
Conforming user agents must apply a default style sheet
那么具体哪些元素有哪些默认的样式,可以通过浏览器的开发者工具查看。
W3C规范的定义:
https://www.w3.org/TR/CSS2/sample.html
https://www.w3.org/TR/html5/rendering.html
开源代码:
Firefox: https://github.com/mozilla/gecko-dev/blob/master/layout/style/res/html.css
Safari: https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Chrome: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
(2)样式重置 CSS Reset
将浏览器存在差别的默认样式全部覆写以达到统一。
Eric Meyer’s CSS Reset
https://meyerweb.com/eric/tools/css/reset/
HTML5 Reset Stylesheet
http://html5doctor.com/html-5-reset-stylesheet/
还有很多其他的解决方案。这种直接重置的方案有些暴力!
(3)Normalize.css
在默认的HTML元素样式上提供了跨浏览器的高度一致性。
https://github.com/necolas/normalize.css/
Bootstrap 内置了 Normalize.css:
https://getbootstrap.com/docs/3.3/css/#overview-normalize
(4)其他
关于CSS Reset是有很多争议的,网上很多文章可以参考阅读。
No CSS Reset
https://snook.ca/archives/html_and_css/no_css_reset/
Should You Reset Your CSS?
https://www.webpagefx.com/blog/web-design/should-you-reset-your-css/
To CSS Reset or Not to CSS Reset
http://www.peachpit.com/blogs/blog.aspx?uk=To-CSS-Reset-or-Not-to-CSS-Reset
到底该不该用 CSS reset?
https://www.zhihu.com/question/23554164
关于 CSS Reset 那些事
https://segmentfault.com/a/1190000003021766
- 大小: 80.7 KB
- 大小: 74.3 KB
- 大小: 68.1 KB
- 大小: 75.3 KB
分享到:
相关推荐
CSS重置样式,清除浏览器默认样式,并配置适合设计的基础样式(强调文本是否大多是粗体、主文字色,主链接色,主字体等)。
默认样式: -通常情况下,浏览器会给元素设置一些默认样式 -默认样式的存在会影响页面的布局 -通常情况下编写网页时需要去除浏览器的默认样式 重置样式表 :专门用来对浏览器的样式进行重置 reset:直接取消了...
每一个HTML标签都有它的默认样式,例如标签...通过重新定义标签的样式确保标签在各个浏览器的表现特征一致是我们样式重置的根本原因,在此我总结了一些经常需要重置的标签的默认样式及重置情况。以及写好的重置源文件。
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...
默认样式的存在会影响页面的布局,通常情况下编写网页时必须要去除浏览器的默认样式 但是手动去除默认样式过于复杂,实操时,简单项目可以这么做,但是并不完美. 因此在此提供重置样式表,供大家引入, 直接使用以下语句,...
主要用来重置各个浏览器之间默认样式,使得在开发前进行样式统一
css样式重置,将css默认的样式进行清除,这样有助于自己写自己的css
人力资源管理项目,antd+react前端,重置浏览器默认样式
css样式重置文件,去除默认样式。html标签存在一些默认样式,这些样式会影响我们设计网页。css样式重置文件,去除默认样式。html标签存在一些默认样式,这些样式会影响我们设计网页。css样式重置文件,去除默认样式...
在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。...“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。
CSS教程之重置默认样式与IE兼容圆角的解决方法.pdf
CSS默认样式清空,resetcss,重置css默认样式。每一个HTML标签都有它的默认样式,例如标签有上下边距,body自带外边距等等。这些默认样式在不同的浏览器中可能会不一样,这就导致浏览器默认样式会给我们带来很大的...
由于form是块元素,重置浏览器的默认样式时,需要清除其内边距padding和外边距margin 使用标记定义各种按钮时,通常需要清除其边框 通常情况下需要对文本框和密码框设置2到3像素的内边距,以使用户输入的内容不会...
css reset,导入该css文件,给一些标签添加相同的默认设置,防止在不同的浏览器中出现差异
主要介绍了CSS样式重置代码,一般保存为reset.css修改了默认的css设置,方便布局与提高浏览器兼容性
浏览器的一些默认样式,有时候真的是特别丑; 虽然现在有现成的 UI 框架,但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题,最后将给出完整的重置样式表; 如果有遇到其它样式问题,评论区...
重置浏览器默认样式,解决css3 动画效果鼠标放上去会跳动问题
最近看到一个词叫css reset。什么叫做css reset呢?我理解为重置css,也就是重置默认样式。
最小的准系统CSS重置CSS微重置您可能不需要CSS...一个典型的H1标签错误:/ *“ Chrome重置”-默认的Chrome CSS样式表* / h1 {display:block; 字号:2em; -webkit-margin-before:0.67em; -webkit-margin-after:0。