diff --git a/packages/components/tab-bar/tab-bar.less b/packages/components/tab-bar/tab-bar.less
index b3616ac92..dbcf56206 100644
--- a/packages/components/tab-bar/tab-bar.less
+++ b/packages/components/tab-bar/tab-bar.less
@@ -29,7 +29,7 @@
 
   &--normal&--safe {
     padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: var(--safe-area-inset-bottom);
   }
 
   &--round {
@@ -41,6 +41,6 @@
 
   &--fixed&--round&--safe {
     bottom: constant(safe-area-inset-bottom);
-    bottom: env(safe-area-inset-bottom);
+    bottom: var(--safe-area-inset-bottom);
   }
 }
diff --git a/packages/components/tab-bar/tab-bar.ts b/packages/components/tab-bar/tab-bar.ts
index 7fa06bfe2..038c64153 100644
--- a/packages/components/tab-bar/tab-bar.ts
+++ b/packages/components/tab-bar/tab-bar.ts
@@ -1,7 +1,7 @@
 import { wxComponent, SuperComponent, RelationsOptions } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
-import { getRect } from '../common/utils';
+import { getRect, systemInfo } from '../common/utils';
 
 const { prefix } = config;
 const classPrefix = `${prefix}-tab-bar`;
@@ -22,6 +22,7 @@ export default class Tabbar extends SuperComponent {
     prefix,
     classPrefix,
     placeholderHeight: 56,
+    safeAreaBottomHeight: 0,
   };
 
   properties = props;
@@ -40,15 +41,28 @@ export default class Tabbar extends SuperComponent {
     'fixed, placeholder'() {
       this.setPlaceholderHeight();
     },
+    safeAreaInsetBottom() {
+      this.setSafeAreaBottomHeight();
+    },
   };
 
   lifetimes = {
     ready() {
       this.showChildren();
+      this.setSafeAreaBottomHeight();
     },
   };
 
   methods = {
+    setSafeAreaBottomHeight() {
+      if (!this.properties.safeAreaInsetBottom) return;
+
+      wx.nextTick(() => {
+        const { screenHeight, safeArea } = systemInfo;
+        const safeAreaBottomHeight = screenHeight - (safeArea?.bottom ?? screenHeight);
+        this.setData({ safeAreaBottomHeight: Math.max(0, safeAreaBottomHeight) });
+      });
+    },
     setPlaceholderHeight() {
       if (!this.properties.fixed || !this.properties.placeholder) return;
 
diff --git a/packages/components/tab-bar/tab-bar.wxml b/packages/components/tab-bar/tab-bar.wxml
index 3d801fa4e..2230d6992 100644
--- a/packages/components/tab-bar/tab-bar.wxml
+++ b/packages/components/tab-bar/tab-bar.wxml
@@ -6,7 +6,7 @@
   style="height: {{ placeholderHeight }}px;"
 />
 <view
-  style="{{_._style(['z-index: ' + zIndex, style, customStyle])}}"
+  style="{{_._style(['z-index: ' + zIndex, '--safe-area-inset-bottom: ' + (safeAreaBottomHeight ? safeAreaBottomHeight + 'px' : 'env(safe-area-inset-bottom)'), style, customStyle])}}"
   class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} class {{prefix}}-class"
   aria-role="tablist"
 >