diff --git a/components/vc-picker/RangePicker.tsx b/components/vc-picker/RangePicker.tsx
index cba4984b4c..e56c97aae3 100644
--- a/components/vc-picker/RangePicker.tsx
+++ b/components/vc-picker/RangePicker.tsx
@@ -986,7 +986,6 @@ function RangerPicker<DateType>() {
         ) {
           // Arrow offset
           arrowLeft = startInputDivRef.value.offsetWidth + separatorRef.value.offsetWidth;
-
           if (
             panelDivRef.value.offsetWidth &&
             arrowRef.value.offsetWidth &&
@@ -1001,7 +1000,8 @@ function RangerPicker<DateType>() {
           }
         }
 
-        const arrowPositionStyle = direction === 'rtl' ? { right: arrowLeft } : { left: arrowLeft };
+        const arrowPositionStyle =
+          direction === 'rtl' ? { right: `${arrowLeft}px` } : { left: `${arrowLeft}px` };
 
         function renderPanels() {
           let panels: VueNode;
@@ -1092,7 +1092,7 @@ function RangerPicker<DateType>() {
           return (
             <div
               class={`${prefixCls}-panel-container`}
-              style={{ marginLeft: panelLeft }}
+              style={{ marginLeft: `${panelLeft}px` }}
               ref={panelDivRef}
               onMousedown={e => {
                 e.preventDefault();