写自己的CSS框架 Part2:跨越浏览器的reset

简介:
      One world,one dream

                                      ---slogan of 2008 Olympic

 

2.1浏览器的差异在何处

 

     我想写CSS的人大多遇见过在IE里写的页面美轮美奂,而用FF打开却是分崩离析,反之亦然.这种痛苦是因为IE和FF对一些默认样式的解析并不相同所导致.

      网上有很多为何不一样的例子,下面链接是一个比较全的不同之处,大家可以进去看看。

     http://hi.baidu.com/css%D6%AE%C3%C0/blog/item/f44628e6a506c229b83820ef.html

 

2.2如何实现跨浏览器

2.2.1实现原理

     既然问题出在FF和IE对各种不同HTML元素的解析上所有偏差.更不用说一些其他小市场份额的浏览器上.我们只需要针对性的把页面里大多数HTML元素重置即可.这样在各种浏览器里面显示的效果会是相同的.

2.2.2实现方式






     重置我们选择的名称和大多数框架一样,reset.css,用我们Develper的思想理解—-----框架中所有元素的基类,就像.net里的Object对象一样。

     下面我们来说说reset.css的构成.

1.       首先定义最基本的body,因为所有其他元素都由此继承.我喜欢的框架遵循“尽量保持小”的原则,所以我只简单清除padding和margin,以及设置字体(设置成具体数值,因为在后面用’em’做单位的时候都要以这里做比较,页面风格需要整体变化时,重载这里.)
2.       将大量浏览器预定义的块状元素清除magin和padding(块装元素即在未定义样式的情况下浏览器render出来的方式为display:block;的元素)
3.       让列表前面的符号消失,图片边框消失,p的上下边距为一行字.
     我喜欢reset.css尽量保持简洁.只要实现了基本的重置即可.

     PS:不过也不能过于简洁.记得曾经的框架喜欢对”*”这个CSS选择符重置.可是这个杀伤力太大,往往是杀敌1000自伤800,遇到input之类的表单元素时还得重置回来.最后据传说这样还有性能问题-.-!!不过难以考证…

     下面是满足上面条件最基本的reset.css

 

 

Code
 

   这个reset.css是目前我个人最喜欢,因为reset.css就像.net中的Framework中的Object类一样,应该尽量保持精简,这个精简了很多.只留下了必要的重置.

   在这里值得一说的是:在body里将font的大小和字体设置了具体的值,在其他元素里通过继承的方式来重写这样的方式是我最喜欢的,这样可以很容易的保持页面整体风格的统一

2.3一些注意事项

   Reset.css一经写好,除了BUG之外.永远不要去修改它.而是在其它页面中重载它(不知道用OO的方式理解CSS是否正确,即利用CSS的优先级特性覆盖.这个在下一章说到.)

分类: CSS框架系列
好文要顶 关注我 收藏该文    
CareySon
关注 - 22
粉丝 - 4837
荣誉:推荐博客
+加关注
4



本文转自CareySon博客园博客,原文链接:http://www.cnblogs.com/CareySon/archive/2009/07/07/1518543.html,如需转载请自行联系原作者


相关文章
|
3月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
6月前
|
前端开发
【第18期】一文读懂原子CSS框架
【第18期】一文读懂原子CSS框架
215 0
|
3月前
|
前端开发
CSS Reset或Normalize.css
CSS Reset或Normalize.css
|
4月前
|
Web App开发 XML Java
《手把手教你》系列基础篇(九十六)-java+ selenium自动化测试-框架之设计篇-跨浏览器(详解教程)
【7月更文挑战第14天】这篇教程介绍了如何使用Java和Selenium构建一个支持跨浏览器测试的自动化测试框架。设计的核心是通过读取配置文件来切换不同浏览器执行测试用例。配置文件中定义了浏览器类型(如Firefox、Chrome)和测试服务器的URL。代码包括一个`BrowserEngine`类,它初始化配置数据,根据配置启动指定的浏览器,并提供关闭浏览器的方法。测试脚本`TestLaunchBrowser`使用`BrowserEngine`来启动浏览器并执行测试。整个框架允许在不同浏览器上运行相同的测试,以确保兼容性和一致性。
93 3
|
4月前
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
202 1
|
5月前
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
80 5
|
4月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
72 0
|
4月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
588 0
|
6月前
|
Java BI 数据库
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
|
6月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
118 3