如何写出兼容大部分浏览器的CSS 代码
前阵子一直在从事b/s 项目的开发,在css 方面有一些心得体会,特写来与大家分享,欢迎大家评论,不过请勿人身攻击啊,因为在前几年我也写过一篇文章:[原]兼容浏览器的布局CSS心得体会
楼下有很多人的评论:
就让我继续毁人吧。
1:使用Firefox 当主开发浏览器
为什么我推荐使用firefox 做为主开发浏览器,
首先目前市场上浏览器很多,ie6 + ,firefox ,opera,chrome,qq 浏览器,360浏览器,搜狗浏览器…
为什么我把qq 浏览器,360浏览器,搜狗浏览器 这些也算进去,是因为这些浏览器虽然使用ie的内核,但是在某些地方显示的效果不一样。
有很多人在开发的时候选择ie 做为浏览器,当然我认为如果使用ie 做为主开发浏览器的话,那应该是使用
ie8+ ,毕竟在ie8+ 的时候才出现了比较强大的工具,另外如果使用ie的话,那么你经常问自己的问题是“ie 下显示正常,为什么firefox 下显示不正常呢?”,这点后面会有解释。
回归正题:我推荐使用firefox 做为主开发浏览器的原因:
a:firefox 下面有开发神器firebug.
firebug 究竟有多厉害,相信使用过的人都知道的,另外firebug 还有yslow,等一系列测速插件,并且firebug启动速度也比较快。
b:firefox 有很多开发插件,虽然firebug已经很出色了,但是这些插件在某些地方还是很有用的。
c:firefox 是遵守css 标准的浏览器,众所周知ie 在这方面做的比较烂。
以前我曾经看过一篇文章,大致讲的是
“ie 下显示正常,为什么firefox 下显示不正常呢?”,
其实我感觉应该这样理解
“为什么firefox 下显示不正常,但是在ie下显示正常呢?”
因为当你这样问自己后,你自己就会去查找,究竟是哪些元素ie没有遵守css 标准呢。
d:firebug 虽然有控制台,但是有时候javascript 代码console.write(“something”);,并不会正常的显示到控制台上面去,
当你碰到console 失败的时候,请尝试下下面的步骤:
1:启用firebug
2:禁用所有面板和清空激活列表。
3:重新启用firebug。
2:使用reset.css
使用reset.css 可以省掉很多事情,比如ul ,li 他们在很多浏览器下面的margin ,padding 都不一样,
通过使用reset.css 可以将大部分不一致的地方给屏蔽掉,没有理由不使用reset.css啊。
下面是我随便挑选的一个reset.css.
yui reset.cssbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0; } table {border-collapse:collapse;border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal; } ol,ul {list-style:none; } caption,th {text-align:left; } h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal; } q:before,q:after {content:''; } abbr,acronym { border:0; }
3:学习一些基本的CSS 知识
如果想写好css 的话,那么一些基本的css知识是应该知道的,比如float,margin,padding,position..属性,还有盒子模型,文档流模型,在这里没什么技巧,我只能推荐一些书籍了。
精通CSS:高级Web标准解决方案(第2版)
一些基本的书籍随便看看,上面的这本书籍才是经典中的经典,个人认为学css不看这本书,看遍千本也枉然。
4:常见的bug
常见的一些bug你应该都知道的,事实上在我写css的这段时间,我发现大部分bug 都基本上是这些bug,大部分显示不正确的也是这些bug.
a:clearfix
在很多时候一刀切是非常管用的,尤其是对于那些非常喜欢用float的同学。
clearfix.clearfix:before, .clearfix:after {content:"";display:table; } .clearfix:after{clear:both;overflow:hidden; } .clearfix{*zoom:1; }
b:double margin (双倍边距)
有时候你会发现两个元素的margin 在不同的浏览器上显示不一样,如果你查看css 的时候发现你设置了float的话,那么很可能你碰到了double margin. 解决这个办法的原因很简单,比如设置margin 为0 (即不使用margin,我最早就是这种想法),
最根本的是设置float 元素的display = “inline”.
由于float 元素本来display 就是inline .所以每当你要使用float 的时候,请记住将display 设为inline.
c:关于width ,height,line-height,border
border 是一个很好用的东西,在很多时候,仅仅给元素加个border就解决实际问题了,因为加了border的元素在ie 下面就有了hasLayout 属性。
line-height 也是一个非常让人头痛的属性,有时候你会发现无论你怎么设置height,height 好像不起作用似的,height不起作用有可能是display :line ,也有可能float,同样也有可能是line-height。
有人说过只要是float 的对象就应该设置width,height,关于这点我认为在某些情况下设置width 是必要的,但是设置height 就不一定了。
d:bug 其实没有那么多
有很多些css 的同学,当碰到一两个比较棘手的问题的时候,就说这个是ie的bug,可是大部分情况下,是自己的写法没有符合标准,或者是没有正确的理解css,所以他们经常做的就是,试试加个width,加个height。试试加个border,试试修改下margin,padding。 当然很多时候运气比较好,一下就加对了,但运气不好的时候就比较郁闷了。解决了bug 是运气,没解决bug就是ie的bug,可是事实上ie 的bug 大部分都曾经出现过,所以在对待bug 的时候,还是要心平气和的分析问题,解决问题。
5:应该记住的一些浏览器css写法
如果你使用firefox 做为主开发浏览器的话,我相信你的页面在opera,chrome 下应该也不会太乱,但是ie 我就不敢保证了,这个时候就应该调整ie 兼容性了。
有很多种方式,比如使用条件注释针对各个ie 浏览器引入不同的css。
条件注释<!--[if IE 5]>仅IE5.5可见<![endif]--> <!--[if gt IE 5.5]>仅IE 5.5以上可见<![endif]--> <!--[if lt IE 5.5]>仅IE 5.5以下可见<![endif]--> <!--[if gte IE 5.5]>IE 5.5及以上可见<![endif]--> <!--[if lte IE 5.5]>IE 5.5及以下可见<![endif]--> <!--[if !IE 5.5]>非IE 5.5的IE可见<![endif]—>
我个人比较喜欢的一种方式还是使用css hacker.
我是从ie8,ie7,ie6,逐渐的调的,因为越到后面需要调的东西越多,而通过这种方式来调的话,我的css 代码改动是比较小的,即所谓的小步前进吧。
首先找出是哪个元素引起布局混乱,然后看看是不是属于哪些常见的bug,接着给这个元素设定一个
border.
通过慢慢的查找,相信除了ie6 ,布局应该都是ok的。但是ie6应该怎么做呢?
我比较喜欢的是 “_”
参考自:http://zhidao.baidu.com/question/329196001.html
6 :金子般的table
有很多人都不喜欢table,所以才有了div without table. 对于这些人来说table是不需要的,div 是神。
我以前写过一篇文章:你也可以的,Div Without Table
早这篇文章中,我使用div来布局,虽然题目叫做Div Without Table ,但是我并不是想表达Table 是没用的,Table 是应该被Without 的,我始终坚信一个原则“div 布局,table 展示数据”。
为什么table 是金子呢?
首先table 是一个很早就出现的元素,而且由于table 比较简单,所以各个浏览器对table 的渲染 大部分都是一致的,所以使用table你很容易实现一些功能。
a:居中显示
在有些时候居中显示会让你比较郁闷,你会感觉到table 的好用和舒服。
b:n行n列
对于几行几列的这种布局,不要怀疑,不要犹豫,使用table吧。
c:某些让你改bug 很郁闷的地方。
有时候你会发现你调来调去总是调不好,如果这个bug 引入table 的代价比较小的话,个人也推荐使用table。
传说div 比table 渲染的要快,因为table 必须得等到</table> ,table 中的元素才会被渲染出来,我没有测试过,不知道是不是这样。
7:使用一些CSS 框架
如果你的页面可以使用一些CSS框架的话,那就尝试使用一款CSS框架吧,960grid, blueprint 应该都还算可以。
转载于:https://www.cnblogs.com/LoveJenny/archive/2012/08/27/2657930.html
如何写出兼容大部分浏览器的CSS 代码相关推荐
- css位置-moz-兼容,兼容不同浏览器的CSS前缀-webkit-,-ms-,-moz-,-o-
笔者在工作实践中发现当需要CSS兼容不同的浏览器时,需要在CSS样式前加上不同的前缀,从而使其他浏览器也能够达到相同的页面效果. 那么我们怎么去加上这些前缀呢?我们一起带着疑问来进行学习: 1.前缀分 ...
- 解决方案:h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器
h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器 需求是点击分享按钮,直接唤起微信,发送给好有或者朋友圈.这个需求并不好完成,因为微信并没有对h5网页开放api,但是每个 ...
- 如何写出同事看不懂的Java代码?
壹.瞒天过海 我打赌你肯定想不到,有人居然会在注释里下了毒.看看下面的代码,简单到main方法中只有一行注释. public static void main(String[] args) {// \ ...
- c语言迷宫闯关游戏大全,C语言写出的迷宫闯关游戏代码.doc
C语言写出的迷宫闯关游戏代码 C语言写出的迷宫闯关游戏代码: #include #include #define LEFT 75 #define RIGHT 77 #define UPPER 72 # ...
- 加载如下html 写出输出顺序,浏览器加载和渲染html的顺序-结论篇
我只转载觉得可以使用的. 1.浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完 ...
- 网站改成黑白色(兼容大部分浏览器)
有很多时候我们的网站要改成黑白色的.如果说我们必图片有点夸张,如果说用JS效率会与HTML标签的多少直接影响.最好的办法就是用CSS.但是这个功能大家都不常用.我前段时间有这么一个需求.找了好久才找到 ...
- php如何让网页变黑白,网站改成黑白色(兼容大部分浏览器)
有很多时候我们的网站要改成黑白色的.如果说我们必图片有点夸张,如果说用JS效率会与HTML标签的多少直接影响.最好的办法就是用CSS.但是这个功能大家都不常用.我前段时间有这么一个需求.找了好久才找到 ...
- 前端进阶-个人笔记-如何写出更好风格的JS代码(JS 代码优化建议)
1. 按强类型风格写代码 JS 是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好.下面分点说明: (1)定义变量的时候要指明类型,告诉 JS 解释器这个变量是什么数据类型的,而不 ...
- python代码怎么写出色_如何写出更具有Python风格的代码,五分钟教会你!
我们都喜欢 Python,因为它让编程和理解变的更为简单.但是一不小心,我们就会忽略规则,以非 Pythonic 方式编写一堆垃圾代码,从而浪费 Python 这个出色的语言赋予我们的优雅.Pytho ...
最新文章
- 手把手教你搭建Linux开发环境(VMware+Ubuntu)(四)——gcc编译器的安装和使用
- splice方法_JavaScript数组常用方法
- Oracle 数据库linux下sql命令行按回退键变成^H字符输入问题解决方法
- 微信小程序开发(二)
- JQuery源码-------JQuery中数值型变量的判断isNumeric
- 【数据结构与算法】之深入解析“删除有序数组中的重复项”与“移除元素”的求解思路与算法示例
- 字符串是单一字符的无序组合吗_计算机二级教程 Python语言程序设计 第6章组合数据类型...
- Scala与Java差异(五)之Map与Tuple
- 利用 S3-tests 测试 S3 接口兼容性
- jxl.read.biff.BiffException: Unable to recognize OLE stream解决方法
- 体现临床实际基线疾病活动度的早期RA患者中, 治疗起效时间对临床和放射学的影响...
- 2018年python工作好找吗-未来十年Python的前景会怎样?
- opensaml2.0 java例子_OpenSAML 使用引导 I : 简介——关于OpenSAML你所需知道的一切
- ListView,GridView以及ScrollView上拉下拉控件源码以及Demo发布啦
- html文件嵌入到reportlab,Django Reportlab使用HTML
- SQLServer------Sql Server性能优化辅助指标SET STATISTICS TIME ON和SET STATISTICS IO ON
- 自适应求积算法 MatLab版
- 攻防世界:logmein
- 微软拼音开启小鹤双拼
- G_分包具体详情及处理
热门文章
- 【Javascript Demo】图片瀑布流实现
- 用div代替textarea,实现在文本框中使用回车br和设置字体功能
- OpenCV搜索文件夹中的图片并保存图片路径和信息
- 如何最大化使用BI工具
- 使用Selenium定位鼠标悬浮出现的下拉菜单
- java treemap value排序_Java TreeMap升序|降序排列和按照value进行排序的案例
- python跟人工智能的关系_Python和人工智能的关系
- Java回调网址_极光短信- 回调接口 - 极光文档
- python扫雷脚本_Python自动扫雷实现方法
- linux 硬连接 跨分区,Linux硬盘分区和软硬链接