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


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

前端CSS兼容的一些思路,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。