解决CSS兼容性.doc

解决CSS兼容性/*CSS Document*/*全局样式*/body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,divmargin：0；padding：0；border：0；/*灵活地运用h2等标题的应用，但一定要margin：0；否侧会产生空白*/bodybackground：#fff；color：#333；font-size：12px；margin-top：5px；font-family：宋体；ul,ollist-style-type：none；select,input,img,selectvertical-align：middle；/*目的在于表单中提交按钮和文字域和文字在同一水平线，否则当提交按钮为图片是不在同一水平线上*/atext-decoration：underline；a：linkcolor：#009；a：visitedcolor：#800080；a：hover,a：active,a：focuscolor：#c00；.clearitclear：both；/*去掉链接虚框*/：focusoutline：none；/*针对Firfox*/a,areablr：expression(this.onFocus=this.blur()/*/针对IE*/*page*/#pagewidth：950px；overflow：visible；_display：inline-block；margin：0 auto；/*overflow：visible；表示显示，hidden表示隐藏,这是新浪网的*/#containerwidth：950px；text-align：center；margin：0 auto；/*这是凤凰网的*/*=常用链接begin=*/a.linkRed：link,a.linkRed：visitedcolor：#f00！important；color：#0000FF；/*红色*/a.linkRed：hovercolor：#c00！important；a.linkBlack：link,a.linkBlack：visitedcolor：#000！important；/*黑色*/a.linkBlack：hovercolor：#f00！important；a.linkWhite：link,a.linkWhite：visitedcolor：#fff！important；/*白色*/a.linkWhite：hovercolor：#f00！important；a.linkGray：link,a.linkGray：visitedcolor：#5d5d5d！important；/*灰色*/a.linkGray：hovercolor：#f00！important；a.linkCyan：link,a.linkCyan：visitedcolor：#92e4fa！important；text-decoration：underline；/*青色*/*=解决段落间距和段落首行缩进=*/ptext-indent：2em；/*空2个字的距离，em是以当前字号大小为单位*/margin：0px；padding：0px；margin-bottom：15px；/*注意一定要加上margin和padding都为0，否则不起作用*/*=新闻列表实现=*/.news_list ul li spanfloat：right；/*使span元素浮动到右面*/text-align：right；/*日期右对齐*/*内容超长时用省略号代替*/#new1width：200px；overflow：hidden；/*超过宽度不显示*/text-overflow：ellipsis；/*内容超长时用省略号代替*/white-space：nowrap；/*强制内容在一行显示*/border：1px#f00 double；formmargin：0；padding：0；/*解决表单下面空行或有空间的问题*/*=解决新闻列表默认空两格和项目符号不显示的问题=*/ulmargin：0；padding：0；list-type：square inside；/*square表示实心方块，disc表示实心圆即默认值，注意：inside表示项目符号在在文本内，默认是在outside在文本外，即在ul的外边，这样将不会显示列表符号，因为：margin我们设为0了；list-tyle-type：项目符号类型(disc实心圆,circle空心圆,square实心方块,none无；list-style-position：位置(outside和inside；)*/*=无图片圆角矩形的实现方法(局限于单色)=*/*开始定义*/#layoutwidth：300px；height：200px；background：#9BD1FA；/*矩形内部色*/.rtop,.rbottom.rtop div,.rbottom divdisplay：block；height：1px；overflow：hidden；background：#9BD1FA/*块rtop,rbottom内的元素高度都为1px,超出隐藏*/.r1margin：0 5px.r2margin：0 3px/*注意边距为5px,3px,2px,1px,r4高度为2px,目的为是呈现平滑的圆角效果*/.r3margin：0 2px.r4margin：0 1px；height：2px.middleborder：1px#9bd1fa solid；boackground：#f00；/*设置里面边框和背景色*/*应用样式*/*=div id=lyaoutdiv class=rtopdiv class=r1/div div class=r2/div div class=r3/div div class=r4/div/div div class=middlep这是您要放的内容！/p/div div class=rtopdiv class=r4/div div class=r3/div div class=r2/div div class=r1/div/div/div=*/*=浏览器兼容解决方案=*/！-if ie 6.0link rel=stylesheethref=ie6.csstype=text/cssmedia=all/！endif-！-if ie 7.0link rel=stylesheethref=ie7.csstype=text/cssmedia=all/！endif-在调用样式表时加上上述语句可根据不同的浏览器调用不同的样式表/*Clear Fix*/.clearfix：aftercontent：.；display：block；height：0；clear：both；visibility：hidden；.clearfixdisplay：inline-block；/*Hide from IE Mac*/.clearfixdisplay：block；/*End hide from IE Mac*/*end of clearfix*/body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,divmargin：0；padding：0；border：0；/*可解块浏览的兼容问题*/bodybackground：#fff；color：#333；font-size：12px；margin-top：5px；font-family：宋体；text-align：center；/*在body中加入text-algin：center在火狐中并不能使内容整体居中，所以在层上加上marign：0 auto；*/ul,ollist-style-type：none；#linewidth：800px；height：8px；background：#f00；/*for firefox*/*background：#0f0；/*for IE6*/_background：#00f；/*FOR IE7.0，7。0不支支下划线*/overflow：hidden；/*在ie6.0中，高度小于10px时会出现问题，比实际的要高，所以要加上此句，或者将字体设同高度一样的值,font-size：8px；*/#widthwidth：500px！important；/*只对IE7+FF有效*/width：300px；border：1px double#0ff；height：100px；background：#ff0；#f_lwidth：180px；border：1px double#0ff；height：50px；float：right；margin-right：20px；/*在有浮动的时候在ie6.0是居右并非20px，而是40px,即加倍问题,解块办法加上display：inline*/display：inline；#nav/*ff有效*/height：100px；width：800px；background：#0ff；line-height：100px；vertical-align：middle；*html#nav/*只对ie有效*/height：100px；width：800px；background：#0ff；line-height：100px；vertical-align：middle；*+html#nav/*只对ie7.0有效*/height：300px；width：800px；background：#0ff；line-height：300px；vertical-align：middle；/*文字垂直居中*/此信息出自逸诚科技：DIV+CSS=2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法浏览器市场的混乱，给设计师造成很大的麻烦，设计的页面兼容完这个浏览器还得兼容那个浏览器，本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点，ie8的出现就更头疼了，浏览器市场的混乱，给设计师造成很大的麻烦，设计的页面兼容完这个浏览器还得兼容那个浏览器，本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点，ie8的出现就更头疼了，原来hack ie7的方法又不能用了，怎么办呢?第一种方法：还好，微软提供了这样一个代码：meta http-equiv=x-ua-compatiblecontent=ie=7/(一定记住忒有用啦)把这段代码放到head里面，在ie8里面的页面解析起来就跟ie7一模一样的了，所以，基本上可以无视ie8，剩下的代码只需要这样写就可以了background：#ffc；/*对firefox有效*/*background：#ccc；/*对ie7有效*/_background：#000；/*只对ie6有效*/解释一下吧：firefox能解析第一段，后面的两个因为前面加了特殊符号*和_,firefox认不了，所以只认background：#ffc，看到的是黄色；ie7前两短都能认，以最后的为准，所以最后解析是background：#ccc，看到的是灰色；ie6三段都能认，而且_这个只有ie6能认，所以最后解析是_background：#000，看到的是黑色阿门！已经是最简单和最好理解的写法了，如果你是google进来的，我可以很负责任的告诉你，这种方法是ok的，我测试过。ie8的那段兼容7的代码我也测试过了，在我现在的windos 7测试版所带的ie8是没问题的，以后ie8正式版出来还管不管用就不知道了。ps：如果你发现按我这样写还是有问题的话，请查看一下你的html头，看看head之前的内容是不是这样的标准写法！DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Transitional/ENhtml xmlns=这个是现在比较规范的写法，如果你是用dreamweaver做页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证第二种方法：要求苛刻的朋友是不愿意在页面头部增加meta http-equiv=x-ua-compatiblecontent=ie=7/这样一句代码的，因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。早些天本站发布了一篇完美兼容ie6,ie7,ie8以及firefox的css透明滤镜，可能当时测试的疏忽，IE8的兼容性没有解决好，好多朋友回复说用不了。今天抽