收藏
下载资源下载资源 加入VIP,免费下载

兼容和常见问题总结.docx

上传人：b****7 文档编号：15344114 上传时间：2023-07-03 格式：DOCX 页数：30 大小：33.67KB
下载 相关 举报
兼容和常见问题总结.docx_第1页
第1页 / 共30页
兼容和常见问题总结.docx_第2页
第2页 / 共30页
兼容和常见问题总结.docx_第3页
第3页 / 共30页
兼容和常见问题总结.docx_第4页
第4页 / 共30页
兼容和常见问题总结.docx_第5页
第5页 / 共30页
兼容和常见问题总结.docx_第6页
第6页 / 共30页
兼容和常见问题总结.docx_第7页
第7页 / 共30页
兼容和常见问题总结.docx_第8页
第8页 / 共30页
兼容和常见问题总结.docx_第9页
第9页 / 共30页
兼容和常见问题总结.docx_第10页
第10页 / 共30页
兼容和常见问题总结.docx_第11页
第11页 / 共30页
兼容和常见问题总结.docx_第12页
第12页 / 共30页
兼容和常见问题总结.docx_第13页
第13页 / 共30页
兼容和常见问题总结.docx_第14页
第14页 / 共30页
兼容和常见问题总结.docx_第15页
第15页 / 共30页
兼容和常见问题总结.docx_第16页
第16页 / 共30页
兼容和常见问题总结.docx_第17页
第17页 / 共30页
兼容和常见问题总结.docx_第18页
第18页 / 共30页
兼容和常见问题总结.docx_第19页
第19页 / 共30页
兼容和常见问题总结.docx_第20页
第20页 / 共30页
亲，该文档总共30页，到这儿已超出免费预览范围，如果喜欢就下载吧！
下载资源
资源描述

兼容和常见问题总结.docx

《兼容和常见问题总结.docx》由会员分享，可在线阅读，更多相关《兼容和常见问题总结.docx（30页珍藏版）》请在冰点文库上搜索。

兼容和常见问题总结.docx

兼容和常见问题总结

第一次总结；

 区别IE6与FF：

background：

orange;*background:

blue; 

　　区别IE6与IE7：

background:

green!

important;background:

blue; 

　　区别IE7与FF：

background：

orange;*background:

green; 

　　区别FF，IE7，IE6：

background：

orange;*background:

green!

important;*background:

blue; 

　　IE7,IE8兼容:

 

　　1.CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义 !

important可被FireFox和IE7识别*可被IE6、IE7识别_可被IE6识别*+可被IE7识别 

　　2.IE专用的条件注释

--其他浏览器-->

--[ifIE7]>

--适合于IE7-->

[endif]-->

--[iflteIE6]>

--适合于IE6及一下-->

[endif]--> 

　　3.几个浏览器对实际像素的解释 IE/Opera：

对象的实际宽度=（margin-left）+width+（margin-right）  Firefox/Mozilla：

对象的实际宽度=（margin-left）+（border-left-width）+（padding-left）+width+（padding-right）+（border-right-width）+（margin-right） 

　　4.鼠标手势问题：

FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer 

　　5.FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。

如Obj.Style.Height=imgObj.Style.Height+‘px'; 

　　6. FireFox无法解析简写的padding属性设置，如padding5px4px3px1px；必须改为padding-top:

5px;padding-right:

4px;padding-bottom:

3px;padding-left:

1px0； 

　　7. 消除ul、ol等列表的缩进时，样式应写成:

list-style:

none;margin:

0px;padding:

0px;其中margin属性对IE有效，padding属性对FireFox有效 

　　8. CSS控制透明：

IE：

filter:

progid:

DXImageTransform.Microsoft.Alpha（style=0,opacity=60）;FireFox：

opacity:

0.6; 

　　9. CSS控制圆角：

IE：

不支持圆角； FireFox:

-moz-border-radius:

4px;或-moz-border-radius-topleft:

4px;-moz-border-radius-topright:

4px;-moz-border-radius-bottomleft:

4px;-moz-border-radius-bottomright:

4px; 

　　10. CSS双线凹凸边框：

IE：

border:

2pxoutset; FireFox：

-moz-border-top-colors:

#d4d0c8white;-moz-border-left-colors:

#d4d0c8white;-moz-border-right-colors:

#404040#808080;-moz-border-bottom-colors:

#404040#808080;

　　11.IE支持CSS方法cursor:

url（）自定义光标样式文件和滚动条颜色风格；FireFox对以上两者均不支持 

　　12. IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用 

　　13. IE支持Form中的Label标签，包括图片和文字内容；FireFox不支持包含图片的Label，点击图片不能让标记labelfor的Radio或CheckBox产生效果 

　　14. FireFox中的TextArea不支持onScroll事件 

　　15. FireFox不支持display的inline和block 

　　16. FireFox对Div设置margin-left,margin-right为auto时已经居中,IE中不行 

　　17. FireFox对Body设置text-align时,Div需要设置margin:

auto（主要是margin-leftmargin-right）方可居中 

　　18. 对超链接的CSS样式设置最好遵从这样的顺序：

L-V-H-A。

即

--a:

link{}a:

visited{}a:

hover{}a:

active{}-->这样可以避免一些访问过后的超链接就不具备hover和active样式了

　　19. IE中设置长段落自动换行在CSS中设置word-wrap:

break-word；FireFox中使用JS插入的方法来实现，具体代码如下：

/*

[CDATA[*/functiontoBreakWord（el,intLen）{varobj=document.getElementById（el）;varstrContent=obj.innerHTML;varstrTemp="";while（strContent.length>intLen）{strTemp+=strContent.substr（0,intLen）+"";strContent=strContent.substr（intLen,strContent.length）;}strTemp+=""+strContent;obj.innerHTML=strTemp;}if（document.getElementById&&!

document.all）toBreakWord（"div_id",37）;/*]]>*/ 

　　20. 在子容器加了浮动属性后,该容器将不能自动撑开解决方法：

在标签结束后下一个标签中加上一个清除浮动的CSSclear:

both; 

　　21. 浮动后IE6解释外边距为实际边距的双倍解决办法：

加上display:

inline 

　　22. IE6下图片下方会有空隙解决办法：

为img加上display:

block或设置vertical-align属性为vertical-align:

top|bottom|middle|text-bottom

　　23. IE6下两个层中间有空隙解决办法：

设置右侧div也同样浮动float:

left或者相对IE6定义margin-right:

-3px; 

　　24. LI中内容超过长度后以省略号的显示方法 

--li{width:

200px;white-space:

nowrap;text-overflow:

ellipsis;-o-text-overflow:

ellipsis;overflow:

hidden;}-->（只适用与IE）

　　25. 将元素的高度和行高设为相同值，即可垂直居中文本 

--div{height:

30px;line-height:

30px;}--> 

　　26. 对齐文本与文本输入框，须在CSS中增加vertical-align:

middle;属性设置

--……vertical-align:

middle;}--> 

　　27.支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?

解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：

{height:

auto!

important;height:

200px;min-height:

200px;} 

　　28. web标准中IE无法设置滚动条颜色解决办法：

在CSS中对body的设置改为对html的

--html{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;}--> 

　　29. IE6由于默认行高问题无法定义1px左右高度的容器，解决办法：

在CSS中对容器设置如：

overflow:

hidden|zoom:

0.08|line-height:

1px 

　　30.给Flash设置透明属性可使层显示在Flash之上

--解决IE上的问题//>

--解决FireFox上的问题//> 

　　31. FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会解决办法：

用!

important方法多定义一套Height和Width 

　　32.FireFox对div与div之间的空格是忽略的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；而且原因很难查明 

　　33.形如如下格式

当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展；解决办法在层的最下方产生一个高度为1的空格,代码如下

0px/0pxsans-serif;clear:

both;display:

block"> 

　　34. IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px 

　　35. IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px

 

第二次总结：

Css中Z-index的用法

一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部

Z-index属性只能工作于那些被定义了position属性的元素中

#box{position:

relative;z-index:

9999;}

第三次总结

Div+css常见问题

 1.检查HTML元素是否有拼写错误、是否忘记结束标记

　　即使是老手也经常会弄错div的嵌套关系。

可以用dreamweaver的验证功能检查一下有无错误。

 

　  2.检查CSS是否正确

　　检查一下有无拼写错误、是否忘记结尾的}等。

可以利用CleanCSS来检查CSS的拼写错误。

CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

 

　　3.确定错误发生的位置

　　如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

 

　　4.利用border属性确定出错元素的布局特性

　　使用float属性布局一不小心就会出错。

这时为元素添加border属性确定元素边界，错误原因即水落石出。

 

　　5.float元素的父元素不能指定clear属性

　　MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。

这是MacIE的著名的bug，倘若不知道就会走弯路。

 

　　6.float元素务必指定width属性

　　很多浏览器在显示未指定width的float元素时会有bug。

所以不管float元素的内容如何，一定要为其指定width属性。

 

　　另外指定元素时尽量使用em而不是px做单位。

 

　　7.float元素不能指定margin和padding等属性

　　IE在显示指定了margin和padding的float元素时有bug。

因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。

也可以使用hack方法为IE指定特别的值。

 

　　8.float元素的宽度之和要小于100%

　　如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。

因此请保证宽度之和小于99%。

 

　　9.是否重设了默认的样式?

　　某些属性如margin、padding等，不同浏览器会有不同的解释。

因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

 

　　10.是否忘记了写DTD?

　　如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：

 

　　

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" 

Csshack列表

IE6能识别*html.class{}，IE7能识别*+html.class{}或者*:

first-child+html.class{}

.sofish{color:

#c30;/*all*/ 

+color:

#f30;/*ie7*/ 

_color:

#07f;/*ie6注意ie7的"+"号hack写在前端，因为ietester中的ie6认识"+"*/ 

*color:

#777;/*ie6-7*/ 

color:

#ccc\9;/*all-ie*/     } 

@mediaalland（min-width:

0px）{.sofish{color:

#06f;}}/*webkitandopera*/ 

@mediascreenand（-webkit-min-device-pixel-ratio:

0）{.sofish{color:

#aaa444;}}/*webkit*/ 

@mediaalland（-webkit-min-device-pixel-ratio:

10000）,notalland（-webkit-min-device-pixel-ratio:

0）{.sofish{color:

#f36;}}/*opera*/ 

@-moz-documenturl-prefix（）{.sofish{color:

#f60;}}/*Firefox*/

body:

empty.sofish{color:

#080;}/*Firefox1-2*/ 

html>/**/body.sofish,x:

-moz-any-link,x:

default{color:

#333;}/*newestfirefox*/ 

IE6、IE7、Firefox之间的兼容写法：

IE都能识别*;标准浏览器（如FF）不能识别*；

IE6能识别*，但不能识别!

important,

IE7能识别*，也能识别!

important;

FF不能识别*，但能识别!

important;

IE6可识别“_”，而IE7及FF皆不能识别

其他的写法参考：

css中ie的if条件注释使用：

--[if!

IE]>

-->除IE外都可识别

--

[endif]-->

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

[endif]-->

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

[endif]-->

--[ifIE5]>仅IE5.0与IE5.5可以识别

[endif]-->

--[ifgtIE5.0]>IE5.0以及IE5.0以上版本都可以识别

[endif]-->

--[ifIE6]>仅IE6可识别

[endif]-->

--[ifltIE6]>IE6以及IE6以下版本可识别

[endif]-->

--[ifgteIE6]>IE6以及IE6以上版本可识别

[endif]-->

--[ifIE7]>仅IE7可识别

[endif]-->

--[ifltIE7]>IE7以及IE7以下版本可识别

[endif]-->

--[ifgteIE7]>IE7以及IE7以上版本可识别

[endif]-->

第四次总结

Ie6不支持li：

hover的问题

如果让IE支持li:

hover（还有之类的span:

hover、div:

hover），用过的都应该差不多清楚，IE6只能识别a:

hover，但有时候用UL、LI做下拉列表，IE6就一直让我很头疼。

有人用的解决办法可能第一反应就是去网上找相关的JS来代替hover，其实有个超级简单的方法，就是在LI标记里加一个A标记，然后定义这个A标记为display:

block即可，然后就可以把这个A标记宽高设置和LI一样，这样就很兼容IE6了，演示代码如下：

  • block">栏目一

  • block">栏目二

  • block">栏目三

当然了，还有其他别的方法，连代码都不用写，只需引用一个文件就行：

csshover.htc（下载地址：

http:

//www.xs4all.nl/~peterned/htc/csshover3.htc，如果失效，自行XX）

下载好后，只需在代码的中间添加下面这段代码，然后就放心大胆的去使用hover吧（也支持focus）：

--[iflteIE6]>

    

    body{behavior:

url（"csshover.htc"）;}

    

    

[endif]-->

/*第二种js*/

JS代码：

--//-->

[CDATA[//>

--

sfHover=function（）{

varsfEls=document.getElementById（"nav"）.getElementsByTagName（"LI"）;

for（vari=0;i

sfEls.onmouseover=function（）{

this.className+="sfhover";

}

sfEls.onmouseout=function（）{

this.className=this.className.replace（newRegExp（"sfhover\b"）,""）;

}

}

}

if（window.attachEvent）window.attachEvent（"onload",sfHover）;

//-->

]]>

导航结构代码

  • 这是显示的标题1

    • 这是列表中的内容1

    • 这是列表中的内容2

    • 这是列表中的内容3

    • 这是列表中的内容4

  • 这是显示的标题2

    • 这是列表中的内容5

    • 这是列表中的内容6

    • 这是列表中的内容7

    • 这是列表中的内容8

    • CSS样式代码

    #nav,#navul{/*alllists*/

    padding:

    0;

    margin:

    0;

    list-style:

    none;

    line-height:

    1;

    }

    #navli{/*alllistitems*/

    float:

    left;

    width:

    10em;

    }

    #navliul{/*second-levellists*/

    position:

    absolute;

    background:

    orange;

    width:

    10em;

    left:

    -999em;/*usingleftinsteadofdisplaytohidemenusbecausedisplay:

    noneisn'treadbyscreenreaders这里用

    展开阅读全文
    猜你喜欢
    相关搜索
    资源标签

    当前位置：首页 > 工程科技 > 能源化工

    copyright@ 2008-2023 冰点文库 网站版权所有

    经营许可证编号:鄂ICP备19020893号-2