网页设计那些事.docx

--------------------------------------------------------

如果你只是为了兼容ie7和8，其实可以在里加上这样一条代码：

即可免去你大量修改代码，但是我发现，有些后台程序员往往会把它删掉，具体原因我也不清楚。

微软在IE8提供三种解析页面的模式

　　IE8StandardModes：

默认的最标准的模式，严格按照W3C相关规定

　　IE7StandardsModes：

IE7现在用的解析网页的模式，开起机关是在中加入

　　QuirksModes：

IE5用的解析网页的模式，开起机关是删除HTML顶部的DOCTYPE声明

　　注意：

不同模式间的网页在IE8中可以互相frame，因此因不会模式下的DOM和CSS渲染不一样，所以会引发很多问题，务必注意如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：

IE8最新csshack：

　　"\9"　例:

"margin:

0pxauto\9;".这里的"\9"可以区别所有IE和FireFox.

　　"*"　IE6、IE7可以识别.IE8、FireFox不能.

　　"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

---------------------------------------------------------

一些IE6IE7IE8FF的CSShack

p{+color:

#f00;}支持IE6IE7不支持FFIE8

p{_color:

#f00;}支持IE6不支持FF

p{color:

#00f!

important;}

p{color:

#f00;}支持IE7IE6FFIE8

p{color:

#00f!

important;color:

#f00;}支持IE7IE8FF不支持IE6

head:

first-child+bodyp{color:

#f00;}支持IE7IE8FF不支持IE6

/*\*//*/

p{color:

#f00;}

/**/支持IE8不支持IE6IE7FF

html*p{color:

#f00;}支持IE6IE7不支持FFIE8

html>p{color:

#f00;}支持IE7IE8FF不支持IE6

html[xmlns]p{color:

#f00;}支持IE7IE8FF不支持IE6

@import'style.css';

@import"style.css";

@importurl（style.css）;

@importurl（'style.css'）;

@importurl（"style.css"）;支持IE7IE6FFIE8

p{/*/*/color:

#f00;/**/}支持IE6IE7FF不支持IE8

*htmlp{color:

#f00;}支持IE6不支持FFIE7IE8

*+htmlp{color:

#f00;}支持IE7IE8不支持FFIE6

p{*color:

#f00;}支持IE7IE6不支持FFIE8

====================================================

这样写，也许会简单些，很方便，但是这个只是IE8对IE7的兼容模式

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

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

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

4.CSS注意细节

一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：

二、当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：

三、更改IE“查看源代码”菜单打开的编辑器

打开注册表编辑器,在开始-运行中输入regedit

找到以下位置：

HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"InternetExplorer"ViewSourceEditor"EditorName"修改默认的数据为"D:

"ProgramFiles"EmEditor"EmEditor.exe"

切换到IE中查看源代码就可以看到效果了。

如果ViewSourceEditor"EditorName项没有,可以自己新建。

四、自动最大化窗口，在与之间加入：

setTimeout（'top.moveTo（0,0）',5000）;

setTimeout（'top.resizeTo（screen.availWidth,screen.availHeight）',5000）;

五、window.opener实际上就是用window.open打开的窗体的父窗体。

比如在父窗体parentForm里面通过window.open（"subForm.html"）,那么在subform.html中window.opener

就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。

1,window.opener.test（）;---调用父窗体中的test（）方法；

2,如果window.opener存在,设置parentForm中stockBox的值。

if（window.opener&&!

window.opener.closed）

{

window.opener.document.parentForm.stockBox.value=symbol;

}

六、刷新页面的方法

Javascript刷新页面的方法：

1history.go（0）

2location.reload（）

3location=location

4location.assign（location）

5document.execCommand（'Refresh'）

6window.navigate（location）

7location.replace（location）

8document.URL=location.href

自动刷新页面的方法:

1.页面自动刷新：

把加入区域中

2.页面自动跳转：

把加入区域中

3.js自动刷新页面

functionmyrefresh（）

{

window.location.reload（）;

}

setTimeout（'myrefresh（）',1000）;//指定1秒刷新一次

4.JS刷新框架

a）刷新包含该框架的页面用

parent.location.reload（）;

b）子窗口刷新父窗口

self.opener.location.reload（）;

（　或　

opener.location.reload（）">刷新）

c）刷新另一个框架的页面

parent.另一FrameID.location.reload（）;

七、用过CSShack应该知道，用下划线命名是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。

在做CSS检查时会出现错误提示。

八、IE条件注释写法

--[if!

IE]>除IE外都可识别

[endif]-->

--[ifIE]>所有的IE可识别

[endif]-->

--[ifIE5.0]>只有IE5.0可以识别

[endif]-->

九、CSSHACK写法

第一种：

.div{

background:

orange;

*background:

green!

important;

*background:

blue;

}

第二种：

.div{

margin:

10px;

*margin:

15px;

_margin:

15px;

}

第三种：

#div{color:

#333;}

*+html#div{color:

#999;}

*html#div{color:

#666;}

细节2………………………………………………………………………………

一、IE6及以下不识别a标签外的:

hover伪类，在火狐，IE7里能正确达到效果，解决办法：

#showli.s1{border:

1pxsolid#ff9900;background:

#454242;}

#showli.s2{border:

1pxsolid#D9D8D8;background:

#312E2E;}

二、为元素设置hasLayout

很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简单的给元素设置hasLayout值的方法是给加上CSS的height或width（当然，zoom也可以用，但这不是CSS的一部分）。

比如设置为height:

1%。

如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。

三、IE6下字符重复出现

确保浮动元素设置了display:

inline;

在浮动元素中使用margin-right:

-3px;

四、样式优先级

1，内联样式[1.0.0.0]

2，ID选择器[0.1.0.0]

3，类，属性，伪类选择器[0.0.1.0]

4，元素标签，伪元素选择器[0.0.0.1]

五、一个元素垂直居中的css写法

#exm{

position:

absolute;

left:

50%;

top:

50%;

z-index:

1;

width:

200px;

height:

100px;

margin-left:

-100px;

margin-top:

-52px;

}

六、zoom:

normal|number

设置或检索对象的缩放比例。

设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。

虽然此属性不可继承，但是它会影响对象的所有子对象（children）。

七、图片跟文字并排时,要实现图片文字垂直居中:

1>将line-height:

设置成图片的高度,或者图片父元素的高度.

2>再将图片的CSS设置vertical-align:

middle;

八、li元素中包含aimg元素的时候，IE6下出现空白

解决方法一

使li浮动，并设置img为块级元素

解决方法二

设置ul的font-size:

0;

解决方法三

设置img的vertical-align:

bottom;

解决方法四

设置img的margin-bottom:

-5px;

细节3………………………………………………………………………………

一、被点击访问过的超链接样式不在具有hover和active

解决方法：

改变CSS属性的排列顺序:

L-V-H-A

二、FF下连续长字段不能自动换行

解决方法：

word-wrap:

break-word;overflow:

hidden;

三、FF下父容器高度不能自适应

解决办法：

清除子元素的浮动

四、IE下图片下方产生空隙

解决办法：

定义img为display:

block，或vertical-align为top/bottom/middle/text-bottom

定义父容器的字体大小为零，font-size:

0

五、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙

解决办法：

相邻的非浮动元素也设置浮动；

浮动元素相对IE6定义_margin-right:

-3px;

六、LI内容超长后以省略号显示

解决办法：

white-space:

nowrap;（文本不换行）text-overflow:

ellipsis;-o-text-overflow:

ellipsis;overflow:

hidden;

七、文本不能垂直居中

解决办法：

行高和容器高度相等line-height=height；

八、文本输入框和相邻的文本不能对齐

解决办法：

设置文本输入框vertical-align:

middle;

九、IE设置滚动条样式

解决办法：

body{

scrollbar-face-color:

#f6f6f6;

scrollbar-highlight-color:

#fff;

scrollbar-shadow-color:

#eeeeee;

scrollbar-3dlight-color:

#eeeeee;

scrollbar-arrow-color:

#000;

scrollbar-track-color:

#fff;

scrollbar-darkshadow-color:

#fff;

}

十、IE6无法定义高度为1px