很多前端WEB效果在主流浏览器是没有问题的,我们现在写代码都爱用CSS来解决原本需要用JS、jQuery的效果。网站设计希望在SEO方面表现优秀就减少JS的依赖,这是因为这些文件都比较大,影响加载时间。而浏览器兼容性也是一个麻烦事,其实只要习惯了,开发难度就会减少许多,比如:采用通用性好的HTML标签;判断用户的浏览器而外调用不同的CSS、JS等方法,避免全部都加载等方法都值得大家研究。
比如网页的自适应页面,设计元素在不同的设备浏览或者用户改变了浏览器可视宽度的CSS样式的过度改变就用到CSS3的过度效果,但是IE家族的浏览器就不那么友好了,解决办法还是有,先下载一个文件
链接:http://pan.baidu.com/s/1nv5jh1J 密码:uri6
把ie-css3.htc下载下来,htc只有IE才认它,至于工作原理就不啰嗦了,SEOer只解决用户体验问题就行了,感兴趣的也不拦着你去研究。
使用方法
.box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari 和 Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */ }
问题和必要的说明
毕竟不是浏览器自带的属性,使用时遇到问题在所难免,这里说一下一些注意事项,也可以说是方法的局限性吧:
1.当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
2.z-index值一定要比周围元素的要高;
发表评论
评论列表(条)