关于一些css属性在微信上不兼容的解决方法_微信开发者工具的css不支持.space-y-6

本文分享了在微信端开发中遇到的CSS兼容性问题及解决方法，包括如何使用不同浏览器引擎的前缀来实现CSS动画，并提供了解决背景图片显示不全的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在搞一个微信端的项目，在电脑测试就可以，但是放在微信端就出现不兼容的问题。比如css动画，背景图片显示不完全。一开始不懂，就上网就百度，找到了解放方法。所以在这里跟大家分享一下。希望对各位有用。

1.关于css动画解决方法

关键帧：

@keyframes run{
	0%{bottom: -300px;}
	50%{bottom: -150px;}
	100%{bottom: 0px;}
}
 @-webkit-keyframes run{
 	0%{bottom: -300px;}
	50%{bottom: -150px;}
	100%{bottom: 0px;}
 }
 @-moz-keyframes run{
 	0%{bottom: -300px;}
	50%{bottom: -150px;}
	100%{bottom: 0px;}
 }
 @-o-keyframes run{
 	0%{bottom: -300px;}
	50%{bottom: -150px;}
	100%{bottom: 0px;}
 }
 @-ms-keyframes run{
 	0%{bottom: -300px;}
	50%{bottom: -150px;}
	100%{bottom: 0px;}
 }

动画：

animation: run 1s linear;
-webkit-animation: run 1s linear;
-moz-animation: run 1s linear;
 -o-animation: run 1s linear;
 -ms-animation:run 1s linear;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;

transition: all 1s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;

一定要记住在微信端上一定要加-webkit-前缀

 背景高度问题

解放方法：就是你给个固定的高度，因为你宽度给的是100%，所以也不怕会变形之类的。

我解决的方法是这样子，不知道小伙伴们有没有更好的办法，可以说说哦，呵呵呵。