DIV+CSS 适配小集

日期:2021-03-12 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

有关div+css适配IE和firefox的难题
总算创建的div+css网页页面彻底合乎W3C规范。在ie7下显示信息十分完善,用firefox1检测,乖乖1探胡涂

不忍直视。历经1番科学研究发现适配很

简易。

1、提升 div {overflow: hidden;},目地便是让div全自动融入內容高宽比
2、横排的div外套div

此外设置
ul {
margin: 0px;
padding: 0px;
}
是清除li前面的空格


div+css适配性难题

CSS 适配关键点:DOCTYPE 危害 CSS 解决

FF: div 设定 margin-left, margin-right 为 auto 时早已垂直居中, IE 不好

FF: body 设定 text-align 时, div 必须设定 margin: auto(关键是 margin-left,margin-right) 即可

垂直居中

FF: 设定 padding 后, div 会提升 height 和 width, 但 IE 不容易, 故必须用 !important 多设1个

height 和 width

FF: 适用 !important, IE 则忽视, 能用 !important 为 FF 非常设定款式

div 的竖直垂直居中难题: vertical-align:middle; 将行距提升到和全部DIV1样高 line-height:200px; 然

后插进文本,就竖直垂直居中了。缺陷是

要操纵內容不必换行

cursor: pointer 能够另外在 IE FF 中显示信息游标手指状, hand 仅 IE 能够

FF: 连接加边框和情况色,需设定 display: block, 另外设定 float: left 确保不换行。参考

menubar, 给 a 和 menubar 设定高宽比是以便

防止底边显示信息移位, 若不设 height, 能够在 menubar 中插进1个空格XHTML+CSS适配性处理计划方案小集

应用XHTML+CSS架构益处很多,但也的确存在1些难题,无论是由于应用不娴熟還是思路不清楚,我就先

把1些我遇到的难题写在下面。

1.在mozilla firefox和IE中的BOX实体模型解释不1致致使相差2px处理方式:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{margin:30px!important;margin:28px;}

留意这两个margin的次序1定不可以写反,据阿捷的说法!important这个特性IE不可以鉴别,但其他访问器可

以鉴别。因此在IE下实际上解释成这样



div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{maring:30px;margin:28px}

反复界定的话依照最终1个来实行,因此不能以只写margin:XXpx!important;

2.IE5 和IE6的BOX解释不1致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为

300px- 10px(右填充)⑴0px(左填充)最后

div的宽度为280px,而在IE6和别的访问器上宽度则 是以300px+10px(右填充)+10px (左填充)=320px来计

算的。这时候大家能够做以下改动:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{width:300px!important;width :340px;margin:0 10px 0 10px}

有关这个是甚么我也不太搞清楚,只了解IE5和firefox都适用但IE6不适用,假如有人了解的话,请告

诉我1声,谢了!:)

3.ul标识在Mozilla中默认设置是有padding值的,而在IE中仅有margin有值因此先界定

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ul{margin:0;padding:0;}

就可以处理绝大多数难题

4.有关脚本制作,在xhtml1.1中不适用language特性,只必须把编码改成

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<script type="text/javascript">


div+css适配难题处理计划方案(IE5/5.5/6/7/FF)

以前找了几个不一样版本号的可单独运作的IE访问器,恰好拿来试试网页页面的适配性难题。不试不知道道,在IE6

和FF中没难题的网页页面在IE5和IE5.5中乱

成1团,1直听闻IE5是WEB规范制做的1个“钉子户”,如今迫不得已坚信了。

既然有难题,那就找找处理的方式咯,在网络上1搜,有关的文章内容還是很多的,感觉最立即的方式還是“IE

标准注解”,很便捷的就可以为IE的不

同版本号写款式。但这样就得为每一个版本号写1个款式,不好于文档的提升。

找了1些有关的CSS HACK后,感觉应当能够把IE5/IE5.5/IE6/FF的HACK写到1起的,历经检测,终究寻找

了1个非常好的方式,下面大家看来看

如何完成:

大伙儿都了解用!important申明能够提高特定款式标准的运用优先选择权,以下面的事例:

E1{

background-color: red !important;

background-color: blue;

}

但这样写在IE中会有个难题,看过我的《有关CSS款式表优先选择级》和《有关CSS款式表优先选择级补遗》,你会

了解在IE6和FF选用! important申明

能够提升优先选择级別,但在IE6中的!important申明其实不是肯定的,它会被以后的同名特性界定所更换。也

便是说在上面的事例中,IE6所运用的

是最终1个情况色的值,即“blue”;而在FF中情况色的值为“red”。依据这1点,大家便可以把FF和

IE的款式分离出来开。

OK ,处理了FF和IE的难题,如今来处理IE自身的难题。

看过了嘟嘟的《绕开IE6适用IE5的别1种写法-IE也适用"&gt;"》后有感而发,应用“>”IE是不是真的可

以认得?大家看来个事例:

E1{

background-color: red;

>background-color: blue;

}

在FF中获得的是情况色鲜红色,而在IE中获得的情况色是蓝色,依据款式重界定的标准,假如访问器能够识

别“>”,则应当获得的蓝色的情况

,因而能够了解“>”仅有IE能够鉴别,这点是很关键的哦!在后边大伙儿就会了解了。(注:我检测过其

它的1些标记,如“~”、“`”、“

<”等,都仅有IE能够鉴别,在此以便谢谢嘟嘟,强烈推荐应用“>”)

大家再看来个事例:

E1{

>background-color: black;

>background-color : green;

}

这个事例在IE6中获得了黑色的情况;而在IE5.5中获得的翠绿色的情况;在IE5中也获得了黑色的情况。这

就表明了第2句界定仅有IE5.5能鉴别

,这是个很早就发布的HACK,能够在网络上寻找有关的材料,要留意的便是在特性名以后是有1个空格的。

到此大家早已把FF、IE5.5、IE6分离出来

出来了,那IE5呢?实际上如今大家要是把IE5跟IE6分开就OK了,看来看事例:

E1{

>background-color: red;

}

E1{

>background-color: black;

}

这里大家又用到1个HACK,便是“E1{}”,这个界定在IE5以上的版本号才可以鉴别出来。这个事例获得

的結果是,在IE5中的情况色为鲜红色;

在IE5以上版本号中获得的是黑色情况。

终究把不一样版本号的访问器都分离出来出来了,这样大家便可认为不一样的访问器界定不一样的款式了。看来个详细

的事例:

E1{

width: 500px;

height: 50px;

background-color: red !important;

background-color: blue;

text-align:center;

}

E1{

>background-color: black;

>background-color : green;

}

必须留意的是,在上面事例中“background-color”界定的圆满不可以更改,即FF-IE5-IE6-IE5.5。针对IE

的界定在特性前要加“>”,由于

“E1{}”这个HACK在FF中能够鉴别。或许你会想,上面的事例并不是能够写成:

E1{

width: 500px;

height: 50px;

background-color: red;

>background-color: blue;

text-align:center;

}

E1{

>background-color: black;

>background-color : green;

}

这样不就又能够省下几个字节?是没错,但是HACK并不是规范,假如乱用HACK,那只会离规范愈来愈远!


div+css完成Firefox和IE6适配的竖直垂直居中

Firefox中应用display: table-cell; vertical-align: middle;能够完成div竖直垂直居中,而IE6中则必须

依靠IE6中css的特性完成竖直垂直居中。为

了完成Firefox和IE6适配的竖直垂直居中,还必须依靠于!important标识。Firefox适用!important标识,而

IE6忽视!important标识,因而可使

用! important标识差别Firefox和IE6。

[示例编码]
<html>
<body>
<div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px

solid red;">
<p>竖直垂直居中,Firefox only</p>
<p>竖直垂直居中,Firefox only</p>
<p>竖直垂直居中,Firefox only</p>
</div>
<div style="border: 1px solid red; height: 200px; position: relative;">
<div style="position: absolute; top: 50%;">
<div style="position: relative; top: ⑸0%;">
<p>竖直垂直居中,IE6 only</p>
<p>竖直垂直居中,IE6 only</p>
<p>竖直垂直居中,IE6 only</p>
</div>
</div>
</div>
<div style="border: 1px solid red; height: 200px; position: relative; display:

table-cell; vertical-align: middle;">
<div style="position: static !important; position: absolute; top: 50%;">
<div style="position: relative; top: ⑸0%;">
<p>竖直垂直居中,Firefox IE6 only</p>
<p>竖直垂直居中,Firefox IE6 only</p>
<p>竖直垂直居中,Firefox IE6 only</p>
</div>
</div>
</div>
</body>
</html>


div+css的访问器适配难题
水平垂直居中,Firefox应用margin-left: auto; margin-right: auto; IE6 应用text-align: center;
竖直垂直居中,Firefox中应用display: table-cell; vertical-align: middle;能够完成div竖直垂直居中,而

IE6中则必须依靠IE6中css的特性完成垂

直垂直居中。
!important标识,Firefox适用!important标识,IE6忽视!important标识