CSS的兼容问题

baacloud免费翻墙vpn注册使用

在由表格作为架构做网站到DIV架构,这段时间碰到的问题不少,在这里总结一下,以备不时之需.
用DIV+CSS架构网站以来,用到的标签无非就是以下几个:DIV、UL、LI、H1=、SPAN、OL、FORM、LABEL==、A、INPUT。
用到的标签属性也没有多少:width(宽度)、height(高度)、float(浮动)、margin(外边距)、padding(内边距)、 line-height(行间距)、overflow(溢出)、backgroud(背景)、border(边框)、text-align(对齐方式)、 display(显示方式)、flont-family(字体)、font-size(字体大小)、color(字体颜色)、cursor(光标)、 font-weight(字体重量-粗体)、text-indent(文本缩进)、text-style(文字属性-斜体等)、text- decoretion(下划线)、list-style(列表样式)、clear(浮动清除)。
我用过的所有标签和属性也大致这些了,感觉除了定位以外,其它想要得到的样式都不算太难,还可以,连HACK也没用多少。所以在这里只说说定位的问题,包括常用的几个浏览器之间的差异(IE-7、IE-6、FireFox、遨游用的IE的内核、GreenBrowser也一样所以你的操作系统的IE 版本就决定了你的显示状况)
一、Float对定位的影响。
一般说来,DIV是块级元素,与按内容占据空间不同的是,DIV在无任何属性下是占用整行的空间,在一个DIV结束之后,另起一行显示另一些内容。如果不对DIV使用Float属性,放在同一个已经设定宽度的容器内是自动换行显示DIV的,而如果对一个DIV使用FLOAT属性而不设定宽度的话,其后的DIV则会在同一行尾随,直到总宽度达到为止。
符合标准的CSS是需要加FLOAT属性的,不设定的话,在FF下有可能会出现故障。
二、IE-6的双边距BUG。
对两个块张元素的嵌套,如果都使用FLOAT属性,在IE-6下会出现双边距现象,比如明明设置margin-left为5px,在IE-6下会显示10px; 这时需要对被嵌套的块级元素使用display:inline;告知此为内联对象。
图示:
在IE7中

在ie6中
这是样式:

三、ID和CLASS的权重问题。
在初期使用ID和CLASS时,我并不以为然,感觉以为在同一页面没有重复出现可能的元素就用DIV,可以重用的样式则用Class,在后来的一次做划动门时,才真正了解ID权重的真正意义。例如下:
#text1 a{font-size:16px; color:#000; font-weight:normal;}
.text1 a{font-size:12px; color:#FFF; font-weight:bold;}

你会发现,虽然我们遵循了CSS的覆盖原则,以后在后来的链接样式上将会覆盖前面的链接样式,但显示情况完全不是这样,你会发现不论怎么修改,“12号字 Class样式”的链接都会显示前面所定义的样式。而我们是将使用ID的DIV内用的是class的元素。而如果反过来用class嵌套div,则不会出现“覆盖失效”的问题。
问题就在于ID的权位是高于Class的,在拥有不同样式的时候,优先使用ID内的样式。特别是在大的元素使用时,更要注意这一点,要不然你都不知道问题出在哪。
四、块级元素居右问题。
在一个DIV容器内如果同时要放置块级元素和非块级元素(比如说文字)时,会遇到一些小问题,如下:
我们想要的是这种效果:

但得到的却是这种效果(CSS如下):

.test1{width:500px; background: #00CCFF; margin:0 auto; height:500px;}
.test2{float:left;background: #00FF66;}
.test2 span{float:right; width:100px; background: #993366;}
<div class="test1">
<div class="test2">Content for class "test2" Goasd<span>Content for  class "test2span"</span></div>
</div>

为什么会出现这种情况呢,我们试一下如果把放在文字前面:

Content for class “test2span”Content for class “test2” Goasd

那就会得到我们想要的结果了。
不只,所有的块级元素比如说DIV、H1、IMG(图片)如果设置了align为right的话,都会出现这种情况,对于这个问题为什么会出现,我也想知道…
五、清除浮动
对于清除浮动我自己的理解是:对于在FF里包含容器不会随着其中的内容高度改变而改变,对于这块还不太熟悉,只知道如何解决简单的浮动。这种状况在你给包含容器设置背景颜色或边框时会出现,这里需要加入:
overflow:auto; 难道FF默认:overflow:hidden的?也不对,hidden的话里面的内容也不会显示,像clear:both和zoom:1;等不大懂,

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏