diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js
index 549558d67..680d79594 100644
--- a/src/base/layer/layer.popup.js
+++ b/src/base/layer/layer.popup.js
@@ -106,10 +106,11 @@ BI.PopupView = BI.inherit(BI.Widget, {
             });
             this.arrowWrapper = BI.createWidget({
                 type: "bi.absolute",
+                cls: "bi-bubble-arrow-wrapper",
                 items: [{
                     el: this.arrow,
                 }]
-            })
+            });
             // 因为三角符号的原因位置变大了，需要占位
             this.placeholder = BI.createWidget({
                 type: "bi.layout"
diff --git a/src/less/base/view/popupview.less b/src/less/base/view/popupview.less
index b14bb4e35..318518b57 100644
--- a/src/less/base/view/popupview.less
+++ b/src/less/base/view/popupview.less
@@ -28,42 +28,58 @@
 }
 
 .bi-popup-view[data-popper-placement^='top'], .bi-popup-view.top {
-  > div > .bi-bubble-arrow {
-    bottom: -12px;
-    width: 14px;
-    > .bubble-arrow {
-      bottom: 8px;
-      left: 1px;
+  > .bi-bubble-arrow-wrapper {
+    bottom: 0;
+    left: 0;
+    > .bi-bubble-arrow {
+      bottom: -12px;
+      width: 14px;
+      > .bubble-arrow {
+        bottom: 8px;
+        left: 1px;
+      }
     }
   }
 }
 .bi-popup-view[data-popper-placement^='bottom'], .bi-popup-view.bottom {
-  > div > .bi-bubble-arrow {
-    top: -12px;
-    width: 14px;
-    > .bubble-arrow {
-      top: 8px;
-      left: 1px;
+  > .bi-bubble-arrow-wrapper {
+    top: 0;
+    left: 0;
+    > .bi-bubble-arrow {
+      top: -12px;
+      width: 14px;
+      > .bubble-arrow {
+        top: 8px;
+        left: 1px;
+      }
     }
   }
 }
 .bi-popup-view[data-popper-placement^='left'], .bi-popup-view.left {
-  > div > .bi-bubble-arrow {
-    right: -12px;
-    height: 14px;
-    > .bubble-arrow {
-      right: 8px;
-      top: 1px;
+  > .bi-bubble-arrow-wrapper {
+    right: 0;
+    top: 0;
+    > .bi-bubble-arrow {
+      right: -12px;
+      height: 14px;
+      > .bubble-arrow {
+        right: 8px;
+        top: 1px;
+      }
     }
   }
 }
 .bi-popup-view[data-popper-placement^='right'], .bi-popup-view.right {
-  > div > .bi-bubble-arrow {
-    left: -12px;
-    height: 14px;
-    > .bubble-arrow {
-      left: 8px;
-      top: 1px;
+  > .bi-bubble-arrow-wrapper {
+    left: 0;
+    top: 0;
+    > .bi-bubble-arrow {
+      left: -12px;
+      height: 14px;
+      > .bubble-arrow {
+        left: 8px;
+        top: 1px;
+      }
     }
   }
 }