CN104866570A

CN104866570A - 一种css多浏览器兼容的方法

Info

Publication number: CN104866570A
Application number: CN201510266661.3A
Authority: CN
Inventors: 秦峰秀; 季统凯
Original assignee: G Cloud Technology Co Ltd
Current assignee: G Cloud Technology Co Ltd
Priority date: 2015-05-22
Filing date: 2015-05-22
Publication date: 2015-08-26

Abstract

本发明涉及Web前端开发技术领域，特别涉及一种解决CSS多浏览器兼容的方法。本发明通过<div>标签与css样式组合来实现CSS的多浏览器兼容。本发明有效解决了现有IE浏览器下浮动产生的双倍距离，FF和IE对盒模型的差异、高度不自适应、影响页面整体效果的问题；可以用于CSS对各浏览器的兼容实现上。

Description

一种CSS多浏览器兼容的方法

技术领域

本发明涉及Web前端开发技术领域，特别涉及一种解决CSS多浏览器兼容的方法。

背景技术

随着互联网的发展，页面的设计越来越复杂化而且用户体验要求也越来越高，如：当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站，或者页面的时候，会出现一些不兼容的问题。有的显示出来正常，有的显示出来不正常，有的错位导致页面的变形影响页面整体效果，这对用户体验不好。

发明内容

本发明解决的技术问题在于提供一种实现CSS多浏览器兼容的方法，解决各浏览器对CSS兼容产生差异的问题。

本发明解决上述问题的技术方案是：

通过<div>标签与css样式组合来实现CSS的多浏览器兼容。

所述的方法包括以下步骤：

第1步、先建立html页面和外部样式表文件(.css)；

第2步、在html页面链入外部css样式表；

<head>

</head>

第3步、定义<div>标签同时设置class或id属性；

第4步、根据不同浏览器需要，编写对应class的css样式

第5步、在浏览器上打开页面，查看浏览器显示的效果。

所述的根据不同浏览器需要，编写对应class的css样式是：

.select{color：#fc0！important；}！important可被FireFox和IE7识别

.select{*color：#fc0；}*可被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：0px){.select{color：red；}}

/*针对Chrome谷歌浏览器内核支持的CSS样式*/

media screen and(-webkit-min-device-pixel-ratio：0){

.select{color：blue；}}

针对Firefox浏览器的内核CSS写法：

-moz-document url-prefix(){.select{color：green；}}。

本发明的有益效果是：通过常用的HTML标签组织和CSS样式表来实现多浏览器兼容，用户可以更灵活控制页面布局，操作简单方便，结构简洁明了，可以结构化HTML，提高易用性，有效增强了用户体验度。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明的方法流程图。

具体实施方式

如图1所示，本发明通过将HTML的常用标签<div>和CSS样式表组合实现多浏览器的兼容，具体步骤如下：

第1步、先建立html页面和外部样式表文件(.css)；

第2步、在html页面链入外部css样式表；

<head>

</head>

第3步、定义<div>标签同时设置class或id属性；

第4步、根据不同浏览器需要，编写对应class的css样式

如：

.select{color：#fc0！important；}！important可被FireFox和IE7识别

.select{*color：#fc0；}*可被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：0px){.select{color：red；}}

/*针对Chrome谷歌浏览器内核支持的CSS样式*/

media screen and(-webkit-min-device-pixel-ratio：0){

.select{color：blue；}}

针对Firefox浏览器的内核CSS写法：

-moz-document url-prefix(){.select{color：green；}}

第5步、在浏览器上打开页面，查看浏览器显示的效果。

Claims

1.一种CSS多浏览器兼容的方法，其特征在于：通过<div>标签与css样式组合来实现CSS的多浏览器兼容。

2.根据权利要求1所述的多浏览器兼容的方法，其特征在于：所述的方法包括以下步骤：

第1步、先建立html页面和外部样式表文件(.css)；

第2步、在html页面链入外部css样式表；

<head>

</head>

第3步、定义<div>标签同时设置class或id属性；

第4步、根据不同浏览器需要，编写对应class的css样式

第5步、在浏览器上打开页面，查看浏览器显示的效果。

3.根据权利要求2所述的多浏览器兼容的方法，其特征在于：所述的根据不同浏览器需要，编写对应class的css样式是：

.select{color:#fc0！important；}！important可被FireFox和IE7识别

.select{*color:#fc0；}*可被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:0px){.select{color:red；}}

/*针对Chrome谷歌浏览器内核支持的CSS样式*/

media screen and(-webkit-min-device-pixel-ratio:0){

.select{color:blue；}}

针对Firefox浏览器的内核CSS写法：

-moz-document url-prefix(){.select{color:green；}}。