一种css多浏览器兼容的方法
【技术领域】
[0001]本发明涉及Web前端开发技术领域，特别涉及一种解决CSS多浏览器兼容的方法。
【背景技术】
[0002]随着互联网的发展，页面的设计越来越复杂化而且用户体验要求也越来越高，如:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站，或者页面的时候，会出现一些不兼容的问题。有的显示出来正常，有的显示出来不正常，有的错位导致页面的变形影响页面整体效果，这对用户体验不好。
【发明内容】
[0003]本发明解决的技术问题在于提供一种实现CSS多浏览器兼容的方法，解决各浏览器对CSS兼容产生差异的问题。
[0004]本发明解决上述问题的技术方案是:
[0005]通过<div>标签与css样式组合来实现CSS的多浏览器兼容。
[0006]所述的方法包括以下步骤:
[0007]第I步、先建立html页面和外部样式表文件(.css)；
[0008]第2步、在html页面链入外部css样式表；
[0009]〈head〉
[0010]〈link rel = " stylesheet" type =" text/css" href =" style, css" >
[0011]〈/head〉
[0012]第3步、定义<div>标签同时设置class或id属性；
[0013]第4步、根据不同浏览器需要，编写对应class的css样式
[0014]第5步、在浏览器上打开页面，查看浏览器显示的效果。
[0015]所述的根据不同浏览器需要，编写对应class的css样式是:
[0016].select {color:#fc0 ! important ；} ! important 可被 FireFox 和 IE7 识别
[0017].select {*color:#fc0 ;} * 可被 IE6、IE7 识别
[0018].select {_color:#360 可被 IE6 识别
[0019].select {*+color:#36c ;}*+可被 IE7 识别
[0020]*html.select {color:#666 ;}/*IE6*/
[0021]*+html.select {color:#999 ;}/*IE7*/
[0022]针对Opera浏览器:
[0023]Omedia all and (min-width:0px) {.select {color:red ；}}
[0024]/*针对Chrome谷歌浏览器内核支持的CSS样式*/
[0025]Omedia screen and(-webkit-min-device-pixel-rat1:0) {
[0026].select {color:blue ；}}
[0027]针对Firefox浏览器的内核CSS写法:
[0028]1-moz-document ur 1-prefix () {.select {color:green ;}}。
[0029]本发明的有益效果是:通过常用的HTML标签组织和CSS样式表来实现多浏览器兼容，用户可以更灵活控制页面布局，操作简单方便，结构简洁明了，可以结构化HTML，提高易用性，有效增强了用户体验度。
【附图说明】
[0030]下面结合附图对本发明进一步说明:
[0031]图1为本发明的方法流程图。
【具体实施方式】
[0032]如图1所示，本发明通过将HTML的常用标签<div>和CSS样式表组合实现多浏览器的兼容，具体步骤如下:
[0033]第I步、先建立html页面和外部样式表文件(.css)；
[0034]第2步、在html页面链入外部css样式表；
[0035]〈head〉
[0036]〈link rel=" stylesheet" type = " text/css" href = " style, css" >
[0037]〈/head〉
[0038]第3步、定义<div>标签同时设置class或id属性；
[0039]第4步、根据不同浏览器需要，编写对应class的css样式
[0040]如:
[0041].select {color:#fc0 ! important ；} ! important 可被 FireFox 和 IE7 识别
[0042].select {*color:#fc0 ;}* 可被 IE6、IE7 识别
[0043].select {_color:#360 可被 IE6 识别
[0044].select {*+color:#36c ;}*+ 可被 IE7 识别
[0045]*html.select {color:#666 ;}/*IE6*/
[0046]*+html.select {color:#999 ;}/*IE7*/
[0047]针对Opera浏览器。
[0048]Omedia all and (min-width:0px) {.select {color:red ；}}
[0049]/*针对Chrome谷歌浏览器内核支持的CSS样式*/
[0050]Omedia screen and(-webkit-min-device-pixel-rat1:0) {
[0051].select {color:blue ；}}
[0052]针对Firefox浏览器的内核CSS写法:
[0053]1-moz-document url-prefix O {.select {color:green ;}}
[0054]1-moz-document url-prefix () {.select {color:green ；}}
[0055]第5步、在浏览器上打开页面，查看浏览器显示的效果。
【主权项】
1.一种CSS多浏览器兼容的方法，其特征在于:通过<div>标签与CSS样式组合来实现CSS的多浏览器兼容。
2.根据权利要求1所述的多浏览器兼容的方法，其特征在于:所述的方法包括以下步骤: 第I步、先建立html页面和外部样式表文件(.css)； 第2步、在html页面链入外部css样式表；〈head〉〈link rel = ^stylesheet^type = 〃text/css〃href = 〃style.css〃>〈/head〉 第3步、定义<div>标签同时设置class或id属性； 第4步、根据不同浏览器需要，编写对应class的css样式 第5步、在浏览器上打开页面，查看浏览器显示的效果。
3.根据权利要求2所述的多浏览器兼容的方法，其特征在于:所述的根据不同浏览器需要，编写对应class的css样式是:.select {color:#fcO ! important ；} ! important 可被 FireFox 和 IE7 识另Ij?select {*color:#fcO ;}* 可被 IE6、IE7 识别 ?select {—color:#360 可被 IE6 识别?select {*+color:#36c ;}*+ 可被 IE7 识别*html.select{color:#666 ;}/*IE6*/*+html.select{color:#999 ;}/*IE7*/ 针对Opera浏览器:?media all and(min-width:Opx) {.select {color:red ;}} Λ针对Ch1me谷歌浏览器内核支持的CSS样式*/?media screen and (-webkit-min-device-pixel-rat1:0) {.select {color: blue ;}} 针对Firefox浏览器的内核CSS写法:@-moz_document url-pref ix () {.select {color: green ;}}0
【专利摘要】本发明涉及Web前端开发技术领域，特别涉及一种解决CSS多浏览器兼容的方法。本发明通过<div>标签与css样式组合来实现CSS的多浏览器兼容。本发明有效解决了现有IE浏览器下浮动产生的双倍距离，FF和IE对盒模型的差异、高度不自适应、影响页面整体效果的问题；可以用于CSS对各浏览器的兼容实现上。
【IPC分类】G06F17-30
【公开号】CN104866570
【申请号】CN201510266661
【发明人】秦峰秀, 季统凯
【申请人】国云科技股份有限公司
【公开日】2015年8月26日
【申请日】2015年5月22日