前端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");
                }
            });
}

以上这些方式仅是我的喜爱而已。欢迎各位发表看法。