给近两天的工作一个总结,给这周划上句号。
工作中遇到了在google显示的很好的界面,在IE显示的不是很好,但还能看,仅仅是颜色和图片和位置错位,在360浏览器下看就是真的错误太大了,图片不显示,样式也乱了,于是走上解决浏览器兼容之路。
思路1:对应每个浏览器写个css,判断之,工作量太大,放弃。
思路2:针对每个浏览器的不同之处在对应的地方写个判断即可,目测应该可以,只是一个一个找太麻烦,而且我对这个也不是很熟悉,对前端很熟悉的人应该写的时候就会刻意的避免相应的兼容错误了。
思路3:当用户用某一个浏览器时候,不兼容就弹出窗口可以写上,”您的浏览器内核不支持部分功能请切换至****“。我想过这种办法,后来一想这属于逃避问题的做法。
思路:4:指定浏览器内核,360安全浏览器是双内核的,IE和google内核,兼容模式下是ie内核,极速模式下是ie和google内核,可以指定google内核这样打开360安全浏览器就直接进入极速模式了。360极速浏览器也是ie和google双内核的,默认是google内核,在用网银的时候自动跳转ie内核,google内核网银不支持。指定内核是为了渲染网页。
具体操作就是通过meta信息,让浏览器自动使用极速模式的google内核渲染网页。
具体在<head> 与</head> 之间添加 <meta name="renderer" content="webkit">这样就指定了使用google内核。也可以写<meta name="renderer" content="webkit|ie-comp|ie-stand"> 这样指定google内核,ie兼容内核,ie标准内核。
对于<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
IE=edge 告诉ie使用最新的引擎渲染网页。chrome=1激活chrome frame chrome=1, 了解下:google chrome frame(谷歌内嵌浏览器框架GCF),这个插件让用户的IE浏览器外观不变,但用户在浏览网页时,实际使用的是googlec chrome内核,且支持IE6,7,8,多个版本。
FF:支持!important,IE则忽略,用!important为ff特别设置样式。ff:firefox浏览器。
补充:css:linear分为linear-gradient(线性渐变)和(radial-gradient(径向渐变)。
html下注释是<!-- -->
css下注释的/* */
js下注释是/* */