web前端布局和兼容性

web方便分享，但是字体／渲染等配置，在不同平台／浏览器上，都是略有区别的，所以就经常会有困扰“我的字体挺好看的，怎么mac打开就变样了”，“IE设置透明度居然无效”。

H5号称是能handle所有的兼容性问题，然而实际上并没有完全做到，那么有些内容还是需要手动兼容，以下举几个例子：

1.透明度的浏览器兼容：

filter:alpha(opacity=30);

-moz-opacity:0.7;

opacity: 0.7;

可以主流浏览器的透明度70%效果。

2.字体的跨平台兼容

p{

font-family:"Times New Roman",Georgia,Serif;

}

字体是从前向后匹配的。分别在要适配的平台上，找到对应的字体，塞进去就可以了。如果在当前平台未找到，则会向后匹配。

web前端有3种布局方式，以下分开说：

1.table布局

table标签比较容易进行行列对齐的约束，但是由于table的cell间／table与cell是有内联约束的，默认情况下，cell的尺寸随cell内容浮动。如果想要严格规定表格／cell尺寸，在复杂的页面里，往往因为css冲突而不生效。

此时应当修改table的布局方式：

table{

table-layout: fixed;

word-break:break-all;

}

改完后，就可以像div一样，直接设定td宽度了。

2.div布局

div的布局比较简单，需要注意的是，div默认是占用整行的，如果需要一行多个div，需要修改div的浮动方式：

div{

floating:left;

}

这样就可以随意设定宽度了

3.三方库布局

各种三方布局，都是基于div进行实现的，好处是不用配置div属性了。以bootstrap为例：

hi

hi

hi

hi

hi

这样视一行有12列，如果不够一行就向右排列，如果够了12就换行。在处理批量数据时很好用。

ps:

目前的新项目，很少用纯静态的布局了，通常都支持媒体频变，或者屏幕自适应。bootstrap的栅格布局是天然自适应的，但是对高度采用的是auto策略。如果想用js／jquery手写自适应的话，就需要获取要适配的区域的尺寸。这里有一个坑：在$(document).ready();里面获取高度，得到的值会和实际有出入。原因是加载顺序：html Dom->ready()->图片等链接资源->load()，也就是ready（）的时刻，资源文件还没有加载。如果资源文件影响到容器尺寸的话，在ready（）中获取的尺寸就不准确。所以关键是，要在load（）中获取尺寸。

例子：

$(window).load(function(){

var deltaHeight=$('#skill_box').outerHeight(true)+20;

$('#blog_tail').css('margin-top',deltaHeight+'px');

if($(window).width()/deltaHeight<1.504){

$("#skill_bg").css('height',deltaHeight+'px');

$("#skill_bg").css('width','auto');

}else{

$("#skill_bg").css('height','auto');

$("#skill_bg").css('width',$(window).width()+'px');

}

});