Code 移动端css渐变linear-gradient的兼容性问题 css bug 博客相关 编程 html 122次访问 12-10 18:45 之前在使用网站浏览时，发现移动端的界面的背景始终加载不出来。 还发现了一个奇怪的bug：移动端的Safier浏览器浏览时，触发一下图片的悬停（：hover）。然后渐变背景和星空效果就会出现了。 [========]  > 啥也看不见的移动端主页 本以为是背景的canvas+js不适配移动端导致的，在被折磨了快一小时后，发现将body的background改为纯色时，又可以显示出星空效果了。 果不其然，linear-gradient的渐变需要做不同浏览器的兼容。 /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #f46ba0, #ee3a80); /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear,top,from(#f46ba0),to(#ee3a80)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #f46ba0, #ee3a80); /* Opera 11.10+ */ background: -o-linear-gradient(top, #f46ba0, #ee3a80); /* default */ background: linear-gradient(top, #f46ba0, #ee3a80); background-color: #ee3a80; 现在移动端也可以访问网站了~ 至于为什么悬停图片可以兼容默认的渐变，我就不得而知了。。。 < 看火人 Firewatch HTML的自动换行与强制换行 > 让浏览器记住我！
