记得以前在看《CSS实践手册》的时候,看到过“边距碰撞”这样的例子与解释。自己大概记得是这样说的: 当两个具有margin-top或margin-bittom的块元素垂直排列在一个父类的块元素里面的时候,边距的算法在不同的浏览器是算法略有不同。在IE6中,一般都
以前在写CSS的时候,一直都是以Mozilla Firefox3.0为基准,再根据IE的差别来写hack的。所以写得很多都是关于IE6、IE7、IE8方面的兼容,对于Opera、Chrome、Safari这些浏览器的兼容关注得比较少。今天在浏览网页的时候,看到CSS森林那里有一篇最新CSS兼容方案,自己看了感觉还不错。虽然很多都是自己知道,但关于Opera、Chrome、Safari这些自己还是会有一些搞混。毕竟Hack并不是越多越好。下面先记一些这些自己以后可能会用到的兼容写法! .e{ color:#FFF;/* FF,OP,IE8 */ [;color:#0F0;]/* Sa,CH */ *color:#FF0;/* IE7 */ _color:#F00;/* IE6 */ } .e{ background-color:#332200;/* FF*/ } html* .e{ background-color:#FF00FF;/* Sa IE7 CH *
@charset "utf-8"; /* CSS Document */ /*! * Mrchen CSS Library v1 * * Copyright (c) 2010 Mrchen * * Date: 2010-04-14 02:10:21 * Email: mrchenv@foxmail.com */ /* 说明:这段代码只要负责整站标签的重置,让所有主流的浏览器的Web效果一致! */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0px; margin: 0px; } body, html { background:#ffffff; font:12px Arial, Helvetica, sans-serif; } address, caption, cite, code, dfn, em, stro
DIV+CSS样式表命名不能随意而为,否则以后进行维护时困难很大。如同软件开发中对类名的仔细处理一样,DIV+CSS样式表命名也需要遵循规则。自己很常是根据内容来命名的,并且是用英文的。如果不会的话,就只有快速的打开Chrome、Firefox,在地址栏里面g.cn了。 如果要是就几行或几十行代码吧!就根据英文单词就行了。可是要是多了那就不好写了,有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧,自己写的都看不出是什么意思,别说再让程序员调用这些样式了。DIV+CSS样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上,但id只能是一个。所以就开始查一些相关的DIV+CSS样式表id和class的常用命名规则,请大家参考一下:
很多时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等 书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSS hack方法 CSS书写技巧-1:!important(个人非常少用,因为一直都是定IE hack,所以样式都是先在Firefox那里测试,再写IE方面的样式。) !important作用是提高指定样式规则的应用优先权。 IE7以及所有标准浏览器能识别!important 区别IE6与IE7与其他浏览器
今天在写一个”电影排期”的列表的时候,自己先将父类div设置好了宽度,再在里面写多个解释性的标签dl来排版,但当我将所有的样式都设置好以后,在Firefox、谷歌浏览器里面浏览的时候,完全没有问题。效果如下: 但在IE6里面出现了一个比较大的差距:dt、dd上下之间有10px的差距。效果如下: 注意:之所以有灰色的背景,是因为自己在调
最近在浏览一些网站的时候,看到一个介绍css框架的文章,其中有一段说是css重置的框架: MeyerWeb CSS Reset!之前自己一直都是用yahoo的css reset.感觉不错,现在又看到 MeyerWeb CSS Reset: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, bl
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号