前端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兼容的一些思路的更多相关文章
- 【转】Web前端浏览器兼容初探
原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- 前端CSS编程之道-LESS
由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...
- 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿
周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...
- Web前端浏览器兼容初探
浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...
- 浏览器 CSS 兼容写法的测试总结
做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- js和css兼容问题
(一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type="text/javascript" s ...
- [转]Web前端浏览器兼容
转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...
随机推荐
- 10个重要的Linux ps命令实战
Linux作为Unix的衍生操作系统,Linux内建有查看当前进程的工具ps.这个工具能在命令行中使用. PS 命令是什么 查看它的man手册可以看到,ps命令能够给出当前系统中进程的快照.它能捕获系 ...
- python学习第十七天 --定制类
何为定制类? Python的class允许定义许多特殊方法,可以让我们非常方便地生成特定的类.在类中应用或者重写python的特殊方法,得到的类,就是定制类. 大家都知道print的用法.见下面例子 ...
- linux c数据库备份第五版
linux下c实现的数据库备份程序终于迎来第五版啦,这样改程序就暂告一段落啦,有点小激动呢...接下来的一周(可能两周)时间里,我会用一个小型的网络游戏(比拼99乘法)作为我学习linux c的毕业之 ...
- xcode5 自定义模板
经过一番周折,终于在xcode5上实现了一个简单的自定义模板,在项目中集成NSLogger库(增强NSLog的功能,https://github.com/fpillet/NSLogger)——新建项目 ...
- LINUX搭建SVN客户端和多个项目的权限分组管理
搭建SVN服务,有效的管理代码,以下三步可以快速搞定.1.安装 #yum install subversion 判断是否安装成功 1 #subversion -v svnserve, version ...
- Heapsort 堆排序算法详解(Java实现)
Heapsort (堆排序)是最经典的排序算法之一,在google或者百度中搜一下可以搜到很多非常详细的解析.同样好的排序算法还有quicksort(快速排序)和merge sort(归并排序),选择 ...
- Matlab 符号运算
root(p):多项式求根.多项式等于0时对应方程的根. 例:,则输入p=[5 4 3 2 1]; root(p) 注:多项式系数都是按幂指数递减形式的. poly([a,b,c]):求已知根为a,b ...
- mapreduce (二) MapReduce实现倒排索引(一) combiner是把同一个机器上的多个map的结果先聚合一次
1 思路:0.txt MapReduce is simple1.txt MapReduce is powerfull is simple2.txt Hello MapReduce bye MapRed ...
- could only be replicated to 0 nodes, instead of 1
周末机房断电,然后hadoop爆出如题的错误,解决方案就是关闭所有节点的防火墙,相关命令如下: 查看防火墙状态: /etc/init.d/iptables status 暂时关闭防火墙: /etc/i ...
- kibaba 选择字段