你的位置:首页 > 网页设计

[网页设计]前端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 ></div>   <div ></div>   <div >    ...   </div>   <div ></div>   <div ></div><div>
复制代码

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

<div ></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 >  <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");        }      });}
复制代码