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');
}
});
网友评论