前端CSS兼容的一些思路

8/31/2015来源:CSS教程人气:848

前端CSS兼容的一些思路

半夜睡不着觉,起来写第一博。

近段时间,公司要给一个网站产品增加一个换色功能,安排我负责该事项。

之前参与过一些定制项目,是基于该产品的二次开发,说实话里面的前端结构很混乱。所以第一步就是将html前端标签进行了重构,规范了标签结构和className。第二步就开始按照产品原有的样式增加CSS代码。

在这时碰到了一个圆角边框的问题,以前的代码是在每个页面写一个固定结构的div,使用背景图片来实现圆角边框。代码结构大致如下:

.top_border{background:url(topborder.png);}.left_border{background:url(leftborder.png);}.right_border{background:url(rightborder.png);}.bottom_border{background:url(bottomborder.png);}
<div>      <div class="top_border"></div>      <div class="left_border"></div>     <div class="content">    ...     </div>      <div class="right_border"></div>      <div class="bottom_border"></div><div>

在重构时,我直接把这个结构修改为最简化的版本

<div class="content"></div>

这里就有点问题:使用boder-radius可以实现圆角边框,但是不支持IE7 、IE8。

当时我认为,我的这个规范是正确的,所以希望通过不修改HTML的代码结构来完成对IE7/IE8的兼容。

搜索了一下IE7/IE8的解决方案:http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

就以此为基础,使用js来对IE7/IE8进行兼容。主要代码逻辑如下:

if( typeof (document.documentElement.style["border-radius"]) == "string")//判断是否支持{    $.fn.extend({//实现圆角          borderRadius : function (r)          {        var b = this.wrap("<div></div>").parent();        //以下代码 主要以逻辑为主 并非真实执行代码 ,为四角 border-radius = 5的实现                     //调整margin 及 宽度 以符合旧div的布局                b.css( {margin : this.css("margin") , "width ": this.clientWidth});                     this.css({margin:"0"});                             var borderColor = this.css("border-color");        var background = this.css("background-color");         var borderStyle = this.css("borer-style");        //重设边框,只保留两侧边框                     this.css({"border-top-width":"0","border-bottom-width":"0"});//                                  //创建HTML结构,实现上下边框        var setting = { m: [1,2,3,5],bw : [1,1,2,0] };        var i = 0;        for(; i < 3; i++)        {          var t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px",              "border-left-width" : setting.bw[i] +"px","border-right-width" : setting.bw[i] +"px",              "border-color":borderColor,"background-color":background});          b.append(t);          b.PRepend(t.clone(true));        }        var t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px",              "border-width" : "0",              background-color":borderColor});        b.append(t);        b.prepend(t.clone(true));          }    });    $(".content").borderRadius(5);//设置圆角    $(".border1").borderRadius(5);}

虽然运行时的HTML结构变化了,但是编码时的HTML结构没有变化,也算是一种兼容方式吧。

还记得以前也有JS处理过一些其他伪类的兼容,一起列出来:

场景:鼠标移入显示二级菜单。

通常的做法:

.menu{}.menu li ul{display:none;}.menu li:hover ul{display:block;}
<ul class="menu">    <li><a>一级</a>        <ul >            <li><a>二级</a></li>            <li><a>二级</a></li>        </ul>    </li></ul>

当IE6不支持时,可以进行调整

.menu{}.menu li ul{display:none;}.menu li:hover ul,.menu li_hover ul{display:block;}/*增加了一个样式名*/

增加兼容JS

if(不支持:hover){$(".menu li").hover(function(){$(this).addClass("li_hover");},function(){$(this).removeClass("li_hover");})}

增加下面的JS,还可以兼容触屏

if(触屏){    $(".menu li").click(function(){               var isHover = $(this).hasClass("li_hover");                if(!isHover)               {                    $(this).addClass("li_hover");                }                else                {                    $(this).removeClass("li_hover");                }            });}

以上这些方式仅是个人喜好而已。欢迎各位发表见解。