解决CSS兼容性

1、解决css兼容性/*CSS Document*/*全局样式*/body, ul, ol, li, p, hl, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div ma rgin： 0； padding： 0： border： 0： /*灵活地运用h2等标题的应用，但一定要 margin： 0；否侧会产生空口*/bodybackground： #fff； color： #333： font-size： 12px； margin-top： opx； font-family： 宋体；ul, ol list-style-type： none

2、； select, input, img, select vertical-align： middle： /*_!的在于表单 中提交按钮和文字域和文字在同一水平线，否则当提交按钮为图片是不在同一水 平线上*/& text-decoration： underline； a： link color： #009： a： visitedcolor： #800080； a： hover, a： active, a： focuscolor：#c00； . clearit clear： both； /*去掉链接虚框*/： focus outline： none： /* 针对 Firfox*/a, a

3、reablr： expression (this onFocus二this blur ()/*/¥十对 IE*/*page*/#page width： 950px： overflow： visible：display： inline-block； margin： 0auto； /*overflow： visible：表示显示，hidden表示隐藏，这是新浪网的 */#container width： 950px； text-align： center； margin： 0 auto； /*这是 凤凰网的*/*=常用链接 begin=*/a. linkRed： link, a. lin

4、kRed： visited color： #f00! important； color： #0000FF； /* 红色*/a. linkRed： hovercolor： #cOO! important； a. linkBlack： link, a linkBlack： visited color： #000! important： /*黑色*/a. linkBlack： hover color： #f00! important； & linkWhite： link, a linkWhite： visitedcolor： #fff! important；/* 口 色*/a. 1inkWh

5、ite:hovercolor：#f00!important；a 1inkGray： link, a. linkGray： visited color:#5d5d5d! important: /*/& linkGray： hover color：#f00 ! important:a linkCyan：link,a. linkCyan：visitedcolor： #92e4fa! important： text-decoration： underline； /*青色*/*=解决段落 间距和段落首行缩进-*/ptext-indent： 2em： /*空2个字的距离，em是以当 前字号大小为单

6、位*/margin： Opx； padding： Opx； margin-bottom： 15px； /* 注意一定要加上margin和padding都为0,否则不起作用*/*=新闻列表实现 元素浮动到右面 span 使/*； right： =*/. news.list ul li span float */text-align： right； /*日期右对齐*/*内容超长时用省略号代替 */#newl width： 200px； overflow： hidden； /*超过宽度不显示*/text-overflow： ellipsis； /*内容超长时用省略号代替*/whitespace： n

7、owrap: /*强制内容在 一行显示*/border： lpxitfOO double： formmargin： 0： padding： 0； /*解决 表单下面空行或有空间的问题*/*-=解决新闻列表默认空两格和项LI符号不 显示的问题=*/ul margin： 0： padding： 0； list-type： square inside； /*square表示实心方块，disc表示实心圆即默认值，注意:inside 表示项目符号在在文本内，默认是在outside在文本外，即在ul的外边，这样 将不会显示列表符号，因为：margin我们设为0 了； list-tyle-type：项U符

8、号类型（disc实心圆，circle空心圆，square实心方块,none无; list-style-position： 位置（outside 和 inside： ）*/ /*二=无图片圆角矩形的实现方法（局限于单色）=*/*开始定义 */#layoutwidth： 300px； height： 200px； background： 89BD1FA； /*矩形内部 色*/ rtop, rbottom rtop div, rbottom div display： block； height： lpx； overflow： hidden； background： #9BD1FA/*块 rtop,

9、rbottom 内的元素高度都 为 lpx,超出隐藏*/. rl margin： 0 5px. r2 margin： 0 3px/*注意边距为 5px, 3px, 2px, lpx, r4高度为2px,目的为是呈现平滑的圆角效果*/. r3 margin： 0 2pxr4margin： 0 lpx； height： 2pxmiddleborder： lpx#9bdlfa solid； boackground： #f00： /*设置里面边框和背景色*/*应用样式*/*div id=lyaoutdiv class= topdiv class= l/div div class=2/div div c

10、lass= 3/div div class= 4/div/div div class=middlep 这是您要放的内容！ /p/div div class二 topdiv class=4/div div class= 3/div div class= 2/div div class= l/div/div/div =*/*=浏览器兼容解决方案=*/! if ie 6. Ojlink rel=stylesheethref=ie6 css ype= ext/cssmedia=all/!endif-!-if ie 7.0link rel=stylesheethref=ie7. css ype= ext

11、/cssmedia=al1/!endif-/*Clear在调用样式表时加上上述语句可根据不同的浏览器调用不同的样式表.Fix*/ clearfix： after content ： ?： 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, hl, h2,

12、h3, h4, h5, h6, form, fieldset, table, td, im g, div margin： 0： padding： 0： border： 0： /* 可解块浏览的兼容问题 */bodybackground： #fff； color： #333； font-size： 12px； margin-top： 5px； font-family：宋体：text-align： center； /*在 body 中加I入 text-algin： center 在火狐中并不能使内容整体居中，所以在层上加上mdrign： 0 auto； */ul, ollist-style-typ

13、e： none； #linewidth： 800px； height： 8px； background： #f00： /*for firefox*/*background： #0f0： /*for IE6*/_background： #00f ； /*F0R IE7. 0, 7。0 不支支下划线*/overflow： hidden； /*在ie6. 0中，高度小于10px时会出现问题，比实际的要高，所以要加上此句， 或者将字体设同高度一样的值，font-size： 8px： */#widthwidth： 500px! important； /*只对 IE7+FF 有效*/width： 300p

14、x： border： lpx double#Off； height： lOOpx； background： #ffO； #f_1width： 180px； border： lpx doubleSOff； height： 50px； float： right； margin-right： 20px： /*在有 浮动的时候在ie6. 0是居右并非20px,而是40px,即加倍问题,解块办法加上 display： inline*/display： inline； #nav/*ff 有效*/height： lOOpx； width： 800px； background： #Off； 1ine-heig

15、ht： lOOpx； vertical-align： middle； *html#nav/*只对 ie 有效*/height： lOOpx； width： 800px； background： #Off； line-height： lOOpx； vertical-align： middle： *+htm 1#nav/*只对 ie7. 0 有效*/height： 300px： width： 800px； background： #Off； line-height： 300px； vertical-align： middle； /*文字垂直居中*/此信息出自逸诚科技： DIV+CSS二2010全面

16、兼容IE6/IE7/IE8/FF的CSS HACK写法浏览器市场的混乱， 给设计师造成很大的麻烦，设计的页面兼容完这个浏览器还得兼容那个浏览器， 本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点，ie8的出现 就更头疼了， 浏览器市场的混乱，给设计师造成很大的麻烦，设计的页面兼容完这个浏之间的 兼容是很容易解决的。加上个ff跟ie6览器还得兼容那个浏览器，本来. ie7会麻烦点，ie8的岀现就更头疼了，原来hack ie7的方法乂不能用了，怎么 办呢？ 第一种方法： 还好，微软提供了这样一个代码： 放憎集穀?煥極?脛甭?澗灭珈扩敬捜湯整琛尽敦?屜? 一定记住忒有用啦）把这段 代码

17、放到head里面，在ie8里面的页面解析起来就跟ie7 模一样的了，所以， 基本上可以无视ie8,剩下的代码只需要这样写就可以了 background： #ffc； /*对 firefox 有效*/*background： ttccc； /*对 ie7 有效 /.background： #000； /*只对 ie6 有效*/解释一下吧： firefox能解析第一段，后面的两个因为前面加了特殊符号？和firefox认不了 , 所以只认background： #ffc,看到的是黃色；ie7前两短都能认，以最后的为准，所以最后解析是background： #ccc,看到的 是灰色；ie6三段都能认，

18、而且彝这个只有ie6能认，所以最后解析是.background： #000, 看到的是黑色 阿门！已经是最简单和最好理解的写法了，如果你是google进来的，我可以很 负责任的告诉你，这种方法是ok的，我测试过。ie8的那段兼容7的代码我也测试过了，在我现在的windos 7测试版所带的ie8 是没问题的，以后ie8正式版岀来还管不管用就不知道了。ps：如果你发现按我这样写还是有问题的话，请查看一下你的html头，看看head 之前的内容是不是这样的标准写法! DOCTYPE html PUBLIC-/W3C/DTD XHTML 1. 0Transitional/ENhtml xmlns=这个是现在比较规范的写法，如果你是用dreamweaver做页面的话，默认也是这 种规范的，切记，非这种规范写法的，兼容性不能保证 第二种方法：要求苛刻的朋友是不愿意在页面头部增加啟憎集穀?煥極?脛甭?compatiblecontent=ie=7/这样一句代码的，因为这样的结果是每个页面都 得加。那么要想兼容这儿个浏览器还真得想别的办法了。早些天本站发布了一篇 完美兼容ie6, ie7, ie8以及firefox的css透明滤镜，可能当时测试的疏忽,IE8的兼容性没有解决好，好多朋友回复说用不了。今天抽出些时间，查