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

以上這些方式僅是個人喜好而已。歡迎各位發表見解。