DIV+CSS 网页排版小解.docx

DIV+CSS 网页排版小解.docx

《DIV+CSS 网页排版小解.docx》由会员分享，可在线阅读，更多相关《DIV+CSS 网页排版小解.docx（14页珍藏版）》请在冰豆网上搜索。

DIV+CSS网页排版小解

1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。

在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了

2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!

important解决，比如

margin-left:

10px!

important;/*IE7,IE8,FF下是10PX*/;

margin-left:

5px;/*IE6下属性写的是5PX，但在显示出来的是10px

3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。

这种兼容出现的不太多，我做到现在，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:

block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果，6e"Z+e%|8G#|

4.很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!

important又会把IE7做的不兼容，很头疼，在想，有没有什么方法只对FF下进行操做，我用过这个方法，感觉得是百试不爽，就是在属性前面加符号如：

*、&，￥，#，@，—，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法如下（注意有符号的属性和没符号的属性的顺序）

height:

100px;/*FF下显示100的高*/

+height:

120px;/*IE678下显示120高*/

5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:

both;如下

left;height:

100px;width:

500px;">

both;">

100px;width=300px">

6.再就是居中问题，这个问题在新手身上很多，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原因：

1.一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。

2.就是你写了，但是宽度没用绝对宽度：

而是用一个相对的宽度，想局中，必须用绝对宽度。

-

7.扩展：

如果我想在设计的时候，实现IE6，IE7,FF下出现三种不同的效果，比如IE6下背景红色，IE7下蓝色FF下绿色，这里，我自己试过，可以，用兼容的方法（注意顺序，可以好好理解一下）。

7L&t-o7k-a1I

background:

red;/*FF里显示的红色*/

+background:

blue!

important;/*IE7下面显示的蓝色*/

+background:

green;/*IE6下面显示的绿色*/

8.1.在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：

以下是引用片段：

div{

margin:

30px!

important;

margin:

28px;

}

注意这两个margin的顺序一定不能写反，!

important这个属性IE不能识别，但别的浏览器可以识别。

所以在IE下其实解释成这样:

以下是引用片段：

div{

maring:

30px;

margin:

28px

}

重复定义的话按照最后一个来执行，所以不可以只写margin:

XXpx!

important;

2.IE5和IE6的BOX解释不一致IE5下div{width:

300px;margin:

010px010px;}div的宽度会被解释为300px-10px（右填充）-10px（左填充）最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px（右填充）+10px（左填充）=320px来计算的。

这时我们可以做如下修改:

以下是引用片段：

div{

width:

300px!

important;

width/**/:

340px;

margin:

010px010px

}

DIV+CSS解决IE6，IE7，IE8，FF兼容问题

2011-07-2521:

11:

47

DIV+CSS解决IE6，IE7，IE8，FF兼容问题

1.IE8下兼容问题，这个最好处理，转化成IE7兼容就可以。

在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了：

1.

2.

2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!

important解决，比如

margin-left:

10px!

important;/*IE7,IE8,FF下是10PX*/;

margin-left:

5px;/*IE6下属性写的是5PX，但在显示出来的是10px

3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。

这种兼容出现的不太多，我做到现在，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:

block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果，6e"Z+e%|8G#|

4.很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!

important又会把IE7做的不兼容，很头疼，在想，有没有什么方法只对FF下进行操做，我用过这个方法，感觉得是百试不爽，就是在属性前面加符号如：

*、&，￥，#，@，—，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法如下（注意有符号的属性和没符号的属性的顺序）

height:

100px;/*FF下显示100的高*/

+height:

120px;/*IE678下显示120高*/

5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:

both;如下

1.

left;height:

100px;width:

500px;">

2.

both;">

3.

100px;width=300px">

6.再就是居中问题，这个问题在新手身上很多，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原因：

1.一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。

2.就是你写了，但是宽度没用绝对宽度：

而是用一个相对的宽度，想局中，必须用绝对宽度。

-

7.扩展：

如果我想在设计的时候，实现IE6，IE7,FF下出现三种不同的效果，比如IE6下背景红色，IE7下蓝色FF下绿色，这里，我自己试过，可以，用兼容的方法（注意顺序，可以好好理解一下）。

7L&t-o7k-a1I

background:

red;/*FF里显示的红色*/

+background:

blue!

important;/*IE7下面显示的蓝色*/

+background:

green;/*IE6下面显示的绿色*/

IE6IE7IE8FF浏览器的CSS兼容问题

IE6、IE7、IE8、FF浏览器的CSS兼容问题，本来IE6跟ff之间的兼容是很容易解决的。

加上个IE7会麻烦点，IE8的出现就更头疼了，原来hackIE7的方法又不能用了，怎么办呢？

还好，微软提供了这样一个代码：

1.

把这段代码放到里面，在IE8里面的页面解析起来就跟IE7一模一样的了，所以，基本上可以无视IE8，剩下的代码只需要这样写就可以了

1.background:

#ffc;/*对firefox有效*/

2.*background:

#ccc;/*对IE7有效*/

3._background:

#000;/*只对IE6有效*/

解释一下吧：

◆firefox能解析第一段，后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了，所以只认background:

#ffc，看到的是黄色；

◆IE7前两短都能认，以最后的为准，所以最后解析是background:

#ccc，看到的是灰色；

◆IE6三段都能认，而且“_”这个只有IE6能认，所以最后解析是_background:

#000，看到的是黑色

已经是最简单和最好理解的写法了，如果你是google进来的，我可以很负责任的告诉你，这种方法是ok的，我测试过。

◆IE8的那段兼容7的代码我也测试过了，在我现在的windos7测试版所带的IE8是没问题的，以后IE8正式版出来还管不管用就不知道了。

ps：

如果你发现按我这样写还是有问题的话，请查看一下你的html头，看看之前的内容是不是这样的标准写法

1.

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

2.

3."http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4.

//www.w3.org/1999/xhtml">

这个是现在比较规范的写法，如果你是用dreamweaver做页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证。

解决IE6、IE7、Firefox兼容最简单的CSSHack

很早就在这里看到过解决方案，最后发现这个方案还是很可靠的。

当然，唯一的缺点就是每一个属性都要去Hack，但我在很多实践中，只用‘修正’1-2个属性就可以了。

具体写法很容易：

1.#someNode

2.{

3.position:

fixed;

4.#position:

fixed;

5._position:

fixed;

6.}

第一排给Firefox以及其他浏览器看

第二排给IE7（可能以后的IE8、IE9也是如此，谁知道呢）看

第三排给IE6以及更老的版本看

最好的应用就是可以让IE6也“支持”position:

fixed，而且，配合这个原理，可以做到不引入JavaScript代码（仅用IE6的expression），我这里有一个现成的页面，CSS如下写：

1.#ff-r

2.{

3.position:

fixed;

4._position:

absolute;

5.right:

15px;

6.top:

15px;

7._top:

expression（eval（patMode&&

8.patMode=='CSS1Compat'）?

9.documentElement.scrollTop+15:

10.document.body.scrollTop+

11.（document.body.clientHeight

12.-this.clientHeight））;

13.}

Css代码

1.

2.#body{

3.border:

1pxsolid#00f;/*ff的属性*/

4.border:

1pxsolid#090\9;/*IE6/7/8的属性*/

5.border:

1pxsolid#F90\0;/*IE8支持*/

6._border:

1pxsolid#f00;/*IE6的属性*/

7.}

8.

Html代码

1.

2.

3.

• FF下蓝边

4.

• IE6下红边

5.

• IE7下绿边

6.

• IE8下黄边

7.

8.