diff --git a/src/base/collection/collection.js b/src/base/collection/collection.js
index 8f6835aa9..d7f83a0f5 100644
--- a/src/base/collection/collection.js
+++ b/src/base/collection/collection.js
@@ -187,20 +187,11 @@ BI.CollectionView = BI.inherit(BI.Widget, {
                 var index = this.renderedKeys[datum.index] && this.renderedKeys[datum.index][1];
                 var child;
                 if (index >= 0) {
-                    // if (datum.width !== this.renderedCells[index]._width) {
-                    //     this.renderedCells[index]._width = datum.width;
                     this.renderedCells[index].el.setWidth(datum.width);
-                    // }
-                    // if (datum.height !== this.renderedCells[index]._height) {
-                    //     this.renderedCells[index]._height = datum.height;
                     this.renderedCells[index].el.setHeight(datum.height);
-                    // }
-                    // if (this.renderedCells[index]._left !== datum.x) {
-                    this.renderedCells[index].el.element.css("left", datum.x / BI.pixRatio + BI.pixUnit);
-                    // }
-                    // if (this.renderedCells[index]._top !== datum.y) {
-                    this.renderedCells[index].el.element.css("top", datum.y / BI.pixRatio + BI.pixUnit);
-                    // }
+                    // 这里只使用px
+                    this.renderedCells[index].el.element.css("left", datum.x + "px");
+                    this.renderedCells[index].el.element.css("top", datum.y + "px");
                     renderedCells.push(child = this.renderedCells[index]);
                 } else {
                     var item = o.itemFormatter(o.items[datum.index], datum.index);
@@ -215,8 +206,8 @@ BI.CollectionView = BI.inherit(BI.Widget, {
                     }));
                     renderedCells.push({
                         el: child,
-                        left: datum.x,
-                        top: datum.y,
+                        left: datum.x + "px",
+                        top: datum.y + "px",
                         _left: datum.x,
                         _top: datum.y,
                         // _width: datum.width,
diff --git a/src/base/grid/grid.js b/src/base/grid/grid.js
index edeb8a8f3..d1385e4a1 100644
--- a/src/base/grid/grid.js
+++ b/src/base/grid/grid.js
@@ -185,20 +185,11 @@ BI.GridView = BI.inherit(BI.Widget, {
                         var index = this.renderedKeys[key] && this.renderedKeys[key][2];
                         var child;
                         if (index >= 0) {
-                            // if (columnDatum.size !== this.renderedCells[index]._width) {
-                            // this.renderedCells[index]._width = columnDatum.size;
                             this.renderedCells[index].el.setWidth(columnDatum.size);
-                            // }
-                            // if (rowDatum.size !== this.renderedCells[index]._height) {
-                            // this.renderedCells[index]._height = rowDatum.size;
                             this.renderedCells[index].el.setHeight(rowDatum.size);
-                            // }
-                            // if (this.renderedCells[index]._left !== columnDatum.offset + horizontalOffsetAdjustment) {
-                            this.renderedCells[index].el.element.css("left", (columnDatum.offset + horizontalOffsetAdjustment) / BI.pixRatio + BI.pixUnit);
-                            // }
-                            // if (this.renderedCells[index]._top !== rowDatum.offset + verticalOffsetAdjustment) {
-                            this.renderedCells[index].el.element.css("top", (rowDatum.offset + verticalOffsetAdjustment) / BI.pixRatio + BI.pixUnit);
-                            // }
+                            // 这里只使用px
+                            this.renderedCells[index].el.element.css("left", columnDatum.offset + horizontalOffsetAdjustment + "px");
+                            this.renderedCells[index].el.element.css("top", rowDatum.offset + verticalOffsetAdjustment + "px");
                             child = this.renderedCells[index].el;
                             renderedCells.push(this.renderedCells[index]);
                         } else {
@@ -216,8 +207,8 @@ BI.GridView = BI.inherit(BI.Widget, {
                             }), this);
                             renderedCells.push({
                                 el: child,
-                                left: columnDatum.offset + horizontalOffsetAdjustment,
-                                top: rowDatum.offset + verticalOffsetAdjustment,
+                                left: columnDatum.offset + horizontalOffsetAdjustment + "px",
+                                top: rowDatum.offset + verticalOffsetAdjustment + "px",
                                 _left: columnDatum.offset + horizontalOffsetAdjustment,
                                 _top: rowDatum.offset + verticalOffsetAdjustment,
                                 // _width: columnDatum.size,
diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js
index ef7d55749..1e768ae2c 100644
--- a/src/base/layer/layer.popup.js
+++ b/src/base/layer/layer.popup.js
@@ -60,8 +60,8 @@ BI.PopupView = BI.inherit(BI.Widget, {
         }
         this.element.css({
             "z-index": BI.zIndex_popup,
-            "min-width": BI.isNumeric(o.minWidth) ? (o.minWidth / BI.pixRatio + BI.pixUnit) : o.minWidth,
-            "max-width": BI.isNumeric(o.maxWidth) ? (o.maxWidth / BI.pixRatio + BI.pixUnit) : o.maxWidth,
+            "min-width": BI.isNumeric(o.minWidth) ? (BI.pixFormat(o.minWidth)) : o.minWidth,
+            "max-width": BI.isNumeric(o.maxWidth) ? (BI.pixFormat(o.maxWidth)) : o.maxWidth,
         }).bind({ click: fn });
 
         this.element.bind("mousewheel", fn);
@@ -135,11 +135,11 @@ BI.PopupView = BI.inherit(BI.Widget, {
         var o = this.options;
         this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value });
         this.button_group.element.css({
-            "min-height": BI.isNumeric(o.minHeight) ? (o.minHeight / BI.pixRatio + BI.pixUnit) : o.minHeight,
-            "padding-top": o.innerVgap / BI.pixRatio + BI.pixUnit,
-            "padding-bottom": o.innerVgap / BI.pixRatio + BI.pixUnit,
-            "padding-left": o.innerHgap / BI.pixRatio + BI.pixUnit,
-            "padding-right": o.innerHgap / BI.pixRatio + BI.pixUnit,
+            "min-height": BI.isNumeric(o.minHeight) ? (BI.pixFormat(o.minHeight)) : o.minHeight,
+            "padding-top": BI.pixFormat(o.innerVgap),
+            "padding-bottom": BI.pixFormat(o.innerVgap),
+            "padding-left": BI.pixFormat(o.innerHgap),
+            "padding-right": BI.pixFormat(o.innerHgap),
         });
 
         return this.button_group;
@@ -411,7 +411,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
             toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0);
         var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap;
         this.view.resetHeight ? this.view.resetHeight(resetHeight) :
-            this.view.element.css({ "max-height": resetHeight / BI.pixRatio + BI.pixUnit });
+            this.view.element.css({ "max-height": BI.pixFormat(resetHeight) });
     },
 
     setValue: function (selectedValues) {
diff --git a/src/base/list/virtualgrouplist.js b/src/base/list/virtualgrouplist.js
index d32dc3a58..9b7a1b730 100644
--- a/src/base/list/virtualgrouplist.js
+++ b/src/base/list/virtualgrouplist.js
@@ -117,7 +117,7 @@ BI.VirtualGroupList = BI.inherit(BI.Widget, {
         var end = this.tree.leastUpperBound(minContentHeightTo);
         var items = [];
         var topHeight = this.tree.sumTo(Math.max(-1, start - 1));
-        this.topBlank.setHeight(topHeight);
+        this.topBlank.setHeight(topHeight + "px");
         if (this._isAutoHeight()) {
             for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
                 var index = i * o.blockSize;
@@ -125,7 +125,7 @@ BI.VirtualGroupList = BI.inherit(BI.Widget, {
                     items.push(o.items[j]);
                 }
             }
-            this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)));
+            this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px");
             this.container.populate(items.map(function (item, i) {
                 return o.itemFormatter(item, (start < 0 ? 0 : start) * o.blockSize + i);
             }));
diff --git a/src/base/list/virtuallist.js b/src/base/list/virtuallist.js
index 3c110b637..f62d00902 100644
--- a/src/base/list/virtuallist.js
+++ b/src/base/list/virtuallist.js
@@ -146,8 +146,8 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         }
         this.container.element.prepend(firstFragment);
         this.container.element.append(lastFragment);
-        this.topBlank.setHeight(this.tree.sumTo(Math.max(-1, start - 1)));
-        this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)));
+        this.topBlank.setHeight(this.tree.sumTo(Math.max(-1, start - 1)) + "px");
+        this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px");
         BI.each(needMount, function (i, child) {
             child && child._mount();
         });
diff --git a/src/base/single/1.text.js b/src/base/single/1.text.js
index 2a9c77d85..9c4244a9d 100644
--- a/src/base/single/1.text.js
+++ b/src/base/single/1.text.js
@@ -26,32 +26,32 @@
             var self = this, o = this.options;
             if (o.hgap + o.lgap > 0) {
                 this.element.css({
-                    "padding-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                    "padding-left": BI.pixFormat(o.hgap + o.lgap),
                 });
             }
             if (o.hgap + o.rgap > 0) {
                 this.element.css({
-                    "padding-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                    "padding-right": BI.pixFormat(o.hgap + o.rgap),
                 });
             }
             if (o.vgap + o.tgap > 0) {
                 this.element.css({
-                    "padding-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                    "padding-top": BI.pixFormat(o.vgap + o.tgap),
                 });
             }
             if (o.vgap + o.bgap > 0) {
                 this.element.css({
-                    "padding-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
+                    "padding-bottom": BI.pixFormat(o.vgap + o.bgap),
                 });
             }
             if (BI.isWidthOrHeight(o.height)) {
-                this.element.css({ lineHeight: BI.isNumber(o.height) ? (o.height / BI.pixRatio + BI.pixUnit) : o.height });
+                this.element.css({ lineHeight: BI.isNumber(o.height) ? BI.pixFormat(o.height) : o.height });
             }
             if (BI.isWidthOrHeight(o.lineHeight)) {
-                this.element.css({ lineHeight: BI.isNumber(o.lineHeight) ? (o.lineHeight / BI.pixRatio + BI.pixUnit) : o.lineHeight });
+                this.element.css({ lineHeight: BI.isNumber(o.lineHeight) ? BI.pixFormat(o.lineHeight) : o.lineHeight });
             }
             if (BI.isWidthOrHeight(o.maxWidth)) {
-                this.element.css({ maxWidth: BI.isNumber(o.maxWidth) ? (o.maxWidth / BI.pixRatio + BI.pixUnit) : o.maxWidth });
+                this.element.css({ maxWidth: BI.isNumber(o.maxWidth) ? BI.pixFormat(o.maxWidth) : o.maxWidth });
             }
             this.element.css({
                 textAlign: o.textAlign,
diff --git a/src/base/single/button/buttons/button.icon.js b/src/base/single/button/buttons/button.icon.js
index 82048a029..045126c38 100644
--- a/src/base/single/button/buttons/button.icon.js
+++ b/src/base/single/button/buttons/button.icon.js
@@ -31,7 +31,7 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
             height: o.iconHeight,
         });
         if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) {
-            this.element.css("lineHeight", o.height / BI.pixRatio + BI.pixUnit);
+            this.element.css("lineHeight", BI.pixFormat(o.height));
             BI.createWidget({
                 type: "bi.default",
                 element: this,
diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js
index 9965b1ff1..25296c846 100644
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@@ -73,12 +73,14 @@
 
             // 由于button默认情况下有个边框，所以要主动算行高
             var lineHeight, textHeight = o.textHeight;
+            var hasBorder = false
             if (BI.isNumber(o.height)) {
                 if (!isVertical(o.iconPosition)) {
                     if (o.clear || o.block || o.light) {
                         lineHeight = o.height;
                     } else {
-                        lineHeight = o.height - 2;
+                        hasBorder = true;
+                        lineHeight = o.height;
                     }
                 } else {
                     lineHeight = textHeight;
@@ -98,8 +100,8 @@
                     type: "bi.icon_label",
                     cls: o.loading ? loadingCls : (o.iconCls || o.icon),
                     width: this._const.iconWidth,
-                    height: lineHeight,
-                    lineHeight: lineHeight,
+                    height: BI.pixFormat(lineHeight, hasBorder ? 2 : 0),
+                    lineHeight: BI.pixFormat(lineHeight, hasBorder ? 2 : 0),
                     // 不设置，自定义按钮无法居中
                     iconWidth: o.iconWidth,
                     iconHeight: o.iconHeight,
@@ -120,8 +122,8 @@
                 whiteSpace: o.whiteSpace,
                 textAlign: o.textAlign,
                 textWidth: textWidth,
-                textHeight: textHeight,
-                height: lineHeight,
+                textHeight: BI.pixFormat(textHeight, hasBorder ? 2 : 0),
+                height: BI.pixFormat(lineHeight, hasBorder ? 2 : 0),
                 value: o.value,
                 title: null,
             });
@@ -163,7 +165,7 @@
             });
 
             if (o.minWidth > 0) {
-                this.element.css({ "min-width": o.minWidth / BI.pixRatio + BI.pixUnit });
+                this.element.css({ "min-width": BI.pixFormat(o.minWidth) });
             }
         },
 
diff --git a/src/base/single/html/html.js b/src/base/single/html/html.js
index 9abbb2149..84c980427 100644
--- a/src/base/single/html/html.js
+++ b/src/base/single/html/html.js
@@ -25,33 +25,36 @@ BI.Html = BI.inherit(BI.Single, {
         var self = this, o = this.options;
         if (o.hgap + o.lgap > 0) {
             this.element.css({
-                "padding-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                "padding-left": BI.pixFormat(o.hgap + o.lgap),
             });
         }
         if (o.hgap + o.rgap > 0) {
             this.element.css({
-                "padding-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                "padding-right": BI.pixFormat(o.hgap + o.rgap),
             });
         }
         if (o.vgap + o.tgap > 0) {
             this.element.css({
-                "padding-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                "padding-top": BI.pixFormat(o.vgap + o.tgap),
             });
         }
         if (o.vgap + o.bgap > 0) {
             this.element.css({
-                "padding-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
+                "padding-bottom": BI.pixFormat(o.vgap + o.bgap),
             });
         }
         if (BI.isNumber(o.height)) {
-            this.element.css({ lineHeight: o.height / BI.pixRatio + BI.pixUnit });
+            this.element.css({ lineHeight: BI.pixFormat(o.height) });
         }
         if (BI.isNumber(o.lineHeight)) {
-            this.element.css({ lineHeight: o.lineHeight / BI.pixRatio + BI.pixUnit });
+            this.element.css({ lineHeight: BI.pixFormat(o.lineHeight) });
         }
         if (BI.isWidthOrHeight(o.maxWidth)) {
             this.element.css({ maxWidth: o.maxWidth });
         }
+        if (BI.isNumber(o.maxWidth)) {
+            this.element.css({ maxWidth: BI.pixFormat(o.maxWidth) })
+        }
         this.element.css({
             textAlign: o.textAlign,
             whiteSpace: o.whiteSpace,
diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js
index ab67a671a..19fc0322d 100644
--- a/src/base/single/label/abstract.label.js
+++ b/src/base/single/label/abstract.label.js
@@ -109,7 +109,7 @@
                 }
                 if (BI.isNumber(o.height) && o.height > 0) { // 1.4
                     this.element.css({
-                        "line-height": o.height / BI.pixRatio + BI.pixUnit,
+                        "line-height": BI.pixFormat(o.height),
                     });
                     json.textAlign = o.textAlign;
                     delete json.maxWidth;
@@ -183,7 +183,7 @@
             }
             if (BI.isNumber(o.height) && o.height > 0) { // 1.8
                 this.element.css({
-                    "line-height": o.height / BI.pixRatio + BI.pixUnit,
+                    "line-height": BI.pixFormat(o.height),
                 });
                 json.textAlign = o.textAlign;
                 delete json.maxWidth;
@@ -263,7 +263,7 @@
                 if (BI.isNumber(o.height) && o.height > 0) { // 2.3
                     if (o.whiteSpace !== "normal") {
                         this.element.css({
-                            "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit,
+                            "line-height": BI.pixFormat(o.height - (o.vgap * 2)),
                         });
                     }
                     delete json.maxWidth;
@@ -325,7 +325,7 @@
             if (BI.isNumber(o.height) && o.height > 0) {
                 if (o.whiteSpace !== "normal") {
                     this.element.css({
-                        "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit,
+                        "line-height": BI.pixFormat(o.height - (o.vgap * 2)),
                     });
                 }
                 delete json.maxWidth;
diff --git a/src/base/single/label/icon.label.js b/src/base/single/label/icon.label.js
index bff864f1d..53a400a05 100644
--- a/src/base/single/label/icon.label.js
+++ b/src/base/single/label/icon.label.js
@@ -29,7 +29,7 @@ BI.IconLabel = BI.inherit(BI.Single, {
             height: o.iconHeight,
         });
         if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) {
-            this.element.css("lineHeight", (o.lineHeight || o.height) / BI.pixRatio + BI.pixUnit);
+            this.element.css("lineHeight", BI.pixFormat(o.lineHeight || o.height));
             BI.createWidget({
                 type: "bi.default",
                 element: this,
diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js
index 4b59260c9..18af9e8e7 100644
--- a/src/base/single/tip/tip.toast.js
+++ b/src/base/single/tip/tip.toast.js
@@ -30,8 +30,9 @@ BI.Toast = BI.inherit(BI.Tip, {
     render: function () {
         var self = this, o = this.options, c = this._const;
         this.element.css({
-            minWidth: (o.closable ? c.closableMinWidth : c.minWidth) / BI.pixRatio + BI.pixUnit,
-            maxWidth: (o.closable ? c.closableMaxWidth : c.maxWidth) / BI.pixRatio + BI.pixUnit,
+            // 这里直接使用px即可
+            minWidth: BI.pixFormat(o.closable ? c.closableMinWidth : c.minWidth),
+            maxWidth: BI.pixFormat(o.closable ? c.closableMaxWidth : c.maxWidth),
         });
         this.element.addClass("toast-" + o.level);
         function fn(e) {
diff --git a/src/base/single/tip/tip.tooltip.js b/src/base/single/tip/tip.tooltip.js
index eadbd05e9..aae6d8e86 100644
--- a/src/base/single/tip/tip.tooltip.js
+++ b/src/base/single/tip/tip.tooltip.js
@@ -73,7 +73,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {
     },
 
     setWidth: function (width) {
-        this.element.width(width - 2 * this._const.hgap);
+        this.element.width(BI.pixFormat(width - 2 * this._const.hgap));
     },
 
     setText: function (text) {
diff --git a/src/case/colorchooser/colorchooser.js b/src/case/colorchooser/colorchooser.js
index df4d9eb1b..e60ee42f9 100644
--- a/src/case/colorchooser/colorchooser.js
+++ b/src/case/colorchooser/colorchooser.js
@@ -36,8 +36,8 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
                     self.trigger = _ref;
                 },
                 value: o.value,
-                width: o.el.type ? o.width : o.width - 2,
-                height: o.el.type ? o.height : o.height - 2
+                width: o.el.type ? o.width : BI.pixFormat(o.width, 2),
+                height: o.el.type ? o.height : BI.pixFormat(o.height, 2)
             }, o.el),
             popup: () => ({
                 el: BI.extend({
diff --git a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js
index a4d324da1..704c80f14 100644
--- a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js
+++ b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js
@@ -15,8 +15,6 @@ BI.IconTextValueCombo = BI.inherit(BI.Widget, {
 
     _init: function () {
         var self = this, o = this.options;
-        BI.isNumeric(o.width) && (o.width -= 2);
-        BI.isNumeric(o.height) && (o.height -= 2);
         o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
             self.setValue(newValue);
         }) : o.value;
@@ -28,7 +26,7 @@ BI.IconTextValueCombo = BI.inherit(BI.Widget, {
             type: "bi.select_icon_text_trigger",
             cls: "icon-text-value-trigger",
             items: o.items,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
             text: o.text,
             iconCls: o.iconCls,
             value: o.value,
@@ -56,6 +54,8 @@ BI.IconTextValueCombo = BI.inherit(BI.Widget, {
         });
         this.textIconCombo = BI.createWidget({
             type: "bi.combo",
+            height: BI.pixFormat(o.height, 2),
+            width: BI.pixFormat(o.width, 2),
             element: this,
             container: o.container,
             direction: o.direction,
diff --git a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
index 09608dea9..d394a6017 100644
--- a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
+++ b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
@@ -23,16 +23,13 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
             self.populate(newValue);
         }) : o.items;
 
-        var height = BI.isNumeric(o.height) ? (o.height - (o.simple ? 1 : 2)) : o.height;
-        var width = BI.isNumeric(o.width) ? (o.width - 2) : o.width;
-
         return {
             type: "bi.combo",
             cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow",
             container: o.container,
             adjustLength: 2,
-            height: height,
-            width: width,
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
+            width: BI.pixFormat(o.width, 2),
             ref: function () {
                 self.combo = this;
             },
@@ -44,7 +41,7 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
                     self.trigger = this;
                 },
                 items: o.items,
-                height: height,
+                height: BI.pixFormat(o.height, o.simple ? 1 : 2),
                 text: o.text,
                 defaultText: o.defaultText,
                 value: o.value,
diff --git a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js
index 1b9b9a0ce..12c300f22 100644
--- a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js
+++ b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js
@@ -16,8 +16,6 @@ BI.TextValueCheckCombo = BI.inherit(BI.Widget, {
 
     _init: function () {
         var self = this, o = this.options;
-        BI.isNumeric(o.width) && (o.width -= 2);
-        BI.isNumeric(o.height) && (o.height -= 2);
         o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
             self.setValue(newValue);
         }) : o.value;
@@ -29,7 +27,7 @@ BI.TextValueCheckCombo = BI.inherit(BI.Widget, {
             type: "bi.select_text_trigger",
             cls: "text-value-trigger",
             items: o.items,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
             text: o.text,
             value: o.value
         });
@@ -52,6 +50,8 @@ BI.TextValueCheckCombo = BI.inherit(BI.Widget, {
             container: o.container,
             direction: o.direction,
             element: this,
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
             adjustLength: 2,
             el: this.trigger,
             popup: {
diff --git a/src/case/combo/textvaluecombo/combo.textvalue.js b/src/case/combo/textvaluecombo/combo.textvalue.js
index 8acb19eb0..78cb6fc24 100644
--- a/src/case/combo/textvaluecombo/combo.textvalue.js
+++ b/src/case/combo/textvaluecombo/combo.textvalue.js
@@ -22,8 +22,6 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
 
     _init: function () {
         var self = this, o = this.options;
-        BI.isNumeric(o.width) && (o.width -= (o.simple ? 0 : 2));
-        BI.isNumeric(o.height) && (o.height -= (o.simple ? 1 : 2));
         o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
             self.setValue(newValue);
         }) : o.value;
@@ -57,7 +55,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
             ref: ref => this.trigger = ref,
             cls: "text-value-trigger",
             items: o.items,
-            height: o.height,
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             text: o.text,
             value: o.value,
             title,
@@ -118,6 +116,8 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
 
         return {
             type: "bi.combo",
+            height: BI.pixFormat(o.height, 2),
+            width: BI.pixFormat(o.width, 2),
             ref: ref => this.combo = ref,
             container: o.container,
             direction: o.direction,
diff --git a/src/case/layer/panel.js b/src/case/layer/panel.js
index 949f8cbd5..45f5cbf79 100644
--- a/src/case/layer/panel.js
+++ b/src/case/layer/panel.js
@@ -59,7 +59,7 @@ BI.Panel = BI.inherit(BI.Widget, {
             el: {
                 type: "bi.left_right_vertical_adapt",
                 cls: "panel-title bi-header-background bi-border-bottom",
-                height: o.titleHeight - 1,
+                height: BI.pixFormat(o.titleHeight, 1),
                 items: {
                     left: [this.text],
                     right: [this.button_group]
@@ -67,7 +67,7 @@ BI.Panel = BI.inherit(BI.Widget, {
                 lhgap: 10,
                 rhgap: 10
             },
-            height: o.titleHeight - 1
+            height: BI.pixFormat(o.titleHeight, 1)
         };
     },
 
diff --git a/src/case/linearsegment/button.linear.segment.js b/src/case/linearsegment/button.linear.segment.js
index 38479accb..d6c5abe5d 100644
--- a/src/case/linearsegment/button.linear.segment.js
+++ b/src/case/linearsegment/button.linear.segment.js
@@ -15,7 +15,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
             type: "bi.label",
             text: o.text,
             height: o.height,
-            textHeight: o.height - 2,
+            textHeight: BI.pixFormat(o.height, 2),
             value: o.value,
             hgap: o.hgap,
             ref: function () {
diff --git a/src/case/list/list.select.js b/src/case/list/list.select.js
index a1c77107c..dfb3d7c1a 100644
--- a/src/case/list/list.select.js
+++ b/src/case/list/list.select.js
@@ -192,7 +192,7 @@ BI.SelectList = BI.inherit(BI.Widget, {
     resetHeight: function (h) {
         var toolHeight = ( this.toolbar.element.outerHeight() || 25) * ( this.toolbar.isVisible() ? 1 : 0);
         this.list.resetHeight ? this.list.resetHeight(h - toolHeight) :
-            this.list.element.css({"max-height": (h - toolHeight) / BI.pixRatio + BI.pixUnit});
+            this.list.element.css({"max-height": BI.pixFormat(h - toolHeight)});
     },
 
     setNotSelectedValue: function () {
diff --git a/src/case/segment/button.segment.js b/src/case/segment/button.segment.js
index 2d9d6c19a..05d0a3d83 100644
--- a/src/case/segment/button.segment.js
+++ b/src/case/segment/button.segment.js
@@ -20,9 +20,6 @@ BI.SegmentButton = BI.inherit(BI.BasicButton, {
     _init: function () {
         BI.SegmentButton.superclass._init.apply(this, arguments);
         var opts = this.options, self = this;
-        // if (BI.isNumber(opts.height) && BI.isNull(opts.lineHeight)) {
-        //    this.element.css({lineHeight : (opts.height - 2) + 'px'});
-        // }
         this.text = BI.createWidget({
             type: "bi.label",
             element: this,
diff --git a/src/case/segment/segment.js b/src/case/segment/segment.js
index 789d8cea3..55d8d18db 100644
--- a/src/case/segment/segment.js
+++ b/src/case/segment/segment.js
@@ -22,7 +22,7 @@ BI.Segment = BI.inherit(BI.Widget, {
             value: o.value,
             items: BI.createItems(o.items, {
                 type: "bi.segment_button",
-                height: o.height - 2,
+                height: BI.pixFormat(o.height, 2),
                 whiteSpace: o.whiteSpace
             }),
             layout: [
diff --git a/src/case/tree/treeexpander/tree.expander.popup.js b/src/case/tree/treeexpander/tree.expander.popup.js
index 05b3ba6c5..ada979b0e 100644
--- a/src/case/tree/treeexpander/tree.expander.popup.js
+++ b/src/case/tree/treeexpander/tree.expander.popup.js
@@ -25,8 +25,8 @@
             });
 
             if (o.showLine) {
-                this.popupView.element.css("margin-left", -offset * (o.layer + 1) / BI.pixRatio + BI.pixUnit);
-                this.element.css("margin-left", offset * (o.layer + 1) / BI.pixRatio + BI.pixUnit);
+                this.popupView.element.css("margin-left", BI.pixFormat(-offset * (o.layer + 1)));
+                this.element.css("margin-left", BI.pixFormat(offset * (o.layer + 1)));
             }
 
             return {
diff --git a/src/case/trigger/trigger.editor.js b/src/case/trigger/trigger.editor.js
index 55ff83884..4998ea583 100644
--- a/src/case/trigger/trigger.editor.js
+++ b/src/case/trigger/trigger.editor.js
@@ -20,12 +20,11 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
     },
 
     _init: function () {
-        this.options.height -= 2;
         BI.EditorTrigger.superclass._init.apply(this, arguments);
         var self = this, o = this.options, c = this._const;
         this.editor = BI.createWidget({
             type: "bi.sign_editor",
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
             value: o.value,
             validationChecker: o.validationChecker,
             quitChecker: o.quitChecker,
@@ -58,6 +57,7 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
         BI.createWidget({
             element: this,
             type: "bi.horizontal_fill",
+            height: BI.pixFormat(o.height, 2),
             items: [
                 {
                     el: this.editor,
@@ -65,9 +65,9 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
                 }, {
                     el: {
                         type: "bi.trigger_icon_button",
-                        width: o.triggerWidth || o.height
+                        width: o.triggerWidth || BI.pixFormat(o.height, 2)
                     },
-                    width: o.triggerWidth || o.height
+                    width: o.triggerWidth || BI.pixFormat(o.height, 2)
                 }
             ]
         });
diff --git a/src/case/trigger/trigger.text.select.small.js b/src/case/trigger/trigger.text.select.small.js
index 9c39fe750..8e81a7ac7 100644
--- a/src/case/trigger/trigger.text.select.small.js
+++ b/src/case/trigger/trigger.text.select.small.js
@@ -14,14 +14,13 @@ BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, {
     },
 
     _init: function () {
-        this.options.height -= 2;
         BI.SmallSelectTextTrigger.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         var obj = this._digest(o.value, o.items);
         this.trigger = BI.createWidget({
             type: "bi.small_text_trigger",
             element: this,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
             text: obj.text,
             cls: obj.cls,
             textHgap: o.textHgap,
diff --git a/src/core/4.widget.js b/src/core/4.widget.js
index 49c1238cc..058015c32 100644
--- a/src/core/4.widget.js
+++ b/src/core/4.widget.js
@@ -116,8 +116,6 @@
 
         _init: function () {
             BI.Widget.superclass._init.apply(this, arguments);
-            this._initElementWidth();
-            this._initElementHeight();
             this._initVisual();
             this._initState();
             this._initRender();
@@ -203,6 +201,8 @@
 
         _initCurrent: function () {
             var self = this, o = this.options;
+            this._initElementWidth();
+            this._initElementHeight();
             if (o._baseCls || o.baseCls || o.extraCls) {
                 this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || ""));
             }
@@ -289,14 +289,14 @@
         _initElementWidth: function () {
             var o = this.options;
             if (BI.isWidthOrHeight(o.width)) {
-                this.element.css("width", BI.isNumber(o.width) ? o.width / BI.pixRatio + BI.pixUnit : o.width);
+                this.element.css("width", BI.isNumber(o.width) ? BI.pixFormat(o.width) : o.width);
             }
         },
 
         _initElementHeight: function () {
             var o = this.options;
             if (BI.isWidthOrHeight(o.height)) {
-                this.element.css("height", BI.isNumber(o.height) ? o.height / BI.pixRatio + BI.pixUnit : o.height);
+                this.element.css("height", BI.isNumber(o.height) ? BI.pixFormat(o.height) : o.height);
             }
         },
 
@@ -903,14 +903,24 @@
 
     BI.useContext = function (inject) {
         if (BI.Model.target) {
-            var p = BI.Model.target;
+            var vm = BI.Model.target;
             if (inject) {
-                while (p) {
-                    if (p.$$context && inject in p.$$context) {
-                        return p;
+                if (vm.$$computed && inject in vm.$$computed) {
+                    return vm;
+                }
+                if (vm.$$state && inject in vm.$$state) {
+                    return vm;
+                }
+                if (vm.$$model && inject in vm.$$model) {
+                    return vm;
+                }
+                while (vm) {
+                    if (vm.$$context && inject in vm.$$context) {
+                        return vm;
                     }
-                    p = p._parent;
+                    vm = vm._parent;
                 }
+                return null;
             }
         }
         return BI.Model.target;
diff --git a/src/core/constant/var.js b/src/core/constant/var.js
index ac5755e45..fc89511f5 100644
--- a/src/core/constant/var.js
+++ b/src/core/constant/var.js
@@ -15,6 +15,19 @@ BI._.extend(BI, {
     emptyStr: "",
     pixUnit: "px",
     pixRatio: 1,
+    pixFormat: function (pix, border) {
+        if (!BI.isNumber(pix)) {
+            return pix;
+        }
+        if (BI.pixUnit === "px" && BI.pixRatio === 1) {
+            return (pix - (border || 0)) / BI.pixRatio + BI.pixUnit;
+        }
+        var length = pix / BI.pixRatio + BI.pixUnit;
+        if (border > 0) {
+            return `calc(${length} - ${border + "px"})`;
+        }
+        return length;
+    },
     emptyFn: function () {
     },
     empty: null,
diff --git a/src/core/controller/controller.popover.js b/src/core/controller/controller.popover.js
index 83f1e8d5c..9e36e5849 100644
--- a/src/core/controller/controller.popover.js
+++ b/src/core/controller/controller.popover.js
@@ -59,8 +59,9 @@ BI.PopoverController = BI.inherit(BI.Controller, {
                 top = 0;
             }
             popover.element.css({
-                left: left / BI.pixRatio + BI.pixUnit,
-                top: top / BI.pixRatio + BI.pixUnit
+                // 这里直接用px就可以
+                left: left + "px",
+                top: top + "px"
             });
         }
         return this;
diff --git a/src/core/controller/controller.tooltips.js b/src/core/controller/controller.tooltips.js
index 14dbba9e4..98f90fb0b 100644
--- a/src/core/controller/controller.tooltips.js
+++ b/src/core/controller/controller.tooltips.js
@@ -71,8 +71,9 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
             !opt.belowMouse && (y = Math.max(y, top));
         }
         tooltip.element.css({
-            left: x < 0 ? 0 : x / BI.pixRatio + BI.pixUnit,
-            top: y < 0 ? 0 : y / BI.pixRatio + BI.pixUnit
+            // 这里直接用px就可以
+            left: x < 0 ? 0 : x + "px",
+            top: y < 0 ? 0 : y + "px"
         });
         tooltip.element.hover(function () {
             self.remove(name);
diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js
index 5b83ff432..b1ae46ba7 100644
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@@ -42,16 +42,16 @@ BI.Layout = BI.inherit(BI.Widget, {
 
     _init4Margin: function () {
         if (this.options.top) {
-            this.element.css("top", BI.isNumber(this.options.top) ? this.options.top / BI.pixRatio + BI.pixUnit : this.options.top);
+            this.element.css("top", BI.isNumber(this.options.top) ? BI.pixFormat(this.options.top) : this.options.top);
         }
         if (this.options.left) {
-            this.element.css("left", BI.isNumber(this.options.left) ? this.options.left / BI.pixRatio + BI.pixUnit : this.options.left);
+            this.element.css("left", BI.isNumber(this.options.left) ? BI.pixFormat(this.options.left) : this.options.left);
         }
         if (this.options.bottom) {
-            this.element.css("bottom", BI.isNumber(this.options.bottom) ? this.options.bottom / BI.pixRatio + BI.pixUnit : this.options.bottom);
+            this.element.css("bottom", BI.isNumber(this.options.bottom) ? BI.pixFormat(this.options.bottom) : this.options.bottom);
         }
         if (this.options.right) {
-            this.element.css("right", BI.isNumber(this.options.right) ? this.options.right / BI.pixRatio + BI.pixUnit : this.options.right);
+            this.element.css("right", BI.isNumber(this.options.right) ? BI.pixFormat(this.options.right) : this.options.right);
         }
     },
 
@@ -289,7 +289,7 @@ BI.Layout = BI.inherit(BI.Widget, {
     },
 
     _optimiseGap: function (gap) {
-        return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
+        return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap);
     },
 
     _optimiseItemLgap: function (item) {
diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js
index e3c26638d..de14999f7 100644
--- a/src/core/wrapper/layout/layout.flow.js
+++ b/src/core/wrapper/layout/layout.flow.js
@@ -137,16 +137,16 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
         var w = BI.FloatRightLayout.superclass._addElement.apply(this, arguments);
         w.element.css({position: "relative", float: "right"});
         if (BI.isNotNull(item.left)) {
-            w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left});
+            w.element.css({left: BI.isNumber(item.left) ? BI.pixFormat(item.left) : item.left});
         }
         if (BI.isNotNull(item.right)) {
-            w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right});
+            w.element.css({right: BI.isNumber(item.right) ? BI.pixFormat(item.right) : item.right});
         }
         if (BI.isNotNull(item.top)) {
-            w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top});
+            w.element.css({top: BI.isNumber(item.top) ? BI.pixFormat(item.top) : item.top});
         }
         if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom});
+            w.element.css({bottom: BI.isNumber(item.bottom) ? BI.pixFormat(item.bottom) : item.bottom});
         }
         if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
             var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js
index 99fa1b96e..661a6bf77 100644
--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@@ -47,7 +47,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
             }
         }
         if (columnSize > 0) {
-            w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit));
+            w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : BI.pixFormat(columnSize));
         }
         w.element.css({
             position: "relative",
@@ -69,8 +69,8 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
                 gap += o.hgap + o.lgap + o.rgap + this._optimiseItemLgap(o.items[k]) + this._optimiseItemRgap(o.items[k]) + this._optimiseItemHgap(o.items[k]);
                 length += cz;
             }
-            length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : length / BI.pixRatio + BI.pixUnit;
-            gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
+            length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : BI.pixFormat(length);
+            gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap);
             if (columnSize === "fill") {
                 w.element.css("min-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
             }
@@ -86,7 +86,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
         if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
             var top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
                 bottom = o.innerVgap + o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
-            var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : (top + bottom) / BI.pixRatio + BI.pixUnit;
+            var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : BI.pixFormat(top + bottom);
             w.element.css("height", "calc(100% - " + gap + ")");
         }
         return w;
diff --git a/src/widget/date/calendar/popup.month.js b/src/widget/date/calendar/popup.month.js
index 23d262424..fca6c2a6f 100644
--- a/src/widget/date/calendar/popup.month.js
+++ b/src/widget/date/calendar/popup.month.js
@@ -67,7 +67,7 @@ BI.MonthPopup = BI.inherit(BI.Widget, {
                     whiteSpace: "nowrap",
                     once: false,
                     forceSelected: true,
-                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT - 1,
+                    height: BI.pixFormat(BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, 1),
                     width: 30,
                     value: td,
                     text: td,
diff --git a/src/widget/dynamicdate/dynamicdate.combo.js b/src/widget/dynamicdate/dynamicdate.combo.js
index 7ba55181e..4508f8e50 100644
--- a/src/widget/dynamicdate/dynamicdate.combo.js
+++ b/src/widget/dynamicdate/dynamicdate.combo.js
@@ -50,13 +50,13 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                     el: {
                         type: "bi.horizontal_fill",
                         columnSize: [this.constants.iconWidth, "fill"],
-                        height: opts.height - border,
+                        height: BI.pixFormat(opts.height, border),
                         items: [{
                             el: {
                                 type: "bi.icon_button",
                                 cls: "bi-trigger-icon-button date-change-h-font",
-                                width: opts.height - border,
-                                height: opts.height - border,
+                                width: BI.pixFormat(opts.height, border),
+                                height: BI.pixFormat(opts.height, border),
                                 ref: function () {
                                     self.changeIcon = this;
                                 }
@@ -69,8 +69,8 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                             format: opts.format,
                             allowEdit: opts.allowEdit,
                             watermark: opts.watermark,
-                            iconWidth: opts.height - border,
-                            height: opts.height - border,
+                            iconWidth: BI.pixFormat(opts.height, border),
+                            height: BI.pixFormat(opts.height, border),
                             value: opts.value,
                             ref: function () {
                                 self.trigger = this;
diff --git a/src/widget/dynamicdate/dynamicdate.param.item.js b/src/widget/dynamicdate/dynamicdate.param.item.js
index fed229fa2..26c1ad101 100644
--- a/src/widget/dynamicdate/dynamicdate.param.item.js
+++ b/src/widget/dynamicdate/dynamicdate.param.item.js
@@ -21,7 +21,7 @@ BI.DynamicDateParamItem = BI.inherit(BI.Widget, {
                 el: {
                     type: "bi.sign_editor",
                     cls: "bi-border bi-focus-shadow bi-border-radius",
-                    height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 2,
+                    height: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 2),
                     validationChecker: function (v) {
                         return BI.isNaturalNumber(v);
                     },
diff --git a/src/widget/dynamicdate/dynamicdate.popup.js b/src/widget/dynamicdate/dynamicdate.popup.js
index d72c67323..843980eda 100644
--- a/src/widget/dynamicdate/dynamicdate.popup.js
+++ b/src/widget/dynamicdate/dynamicdate.popup.js
@@ -26,7 +26,7 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, {
                         cls: "bi-high-light bi-split-top",
                         shadow: true,
                         text: BI.i18nText("BI-Basic_Clear"),
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         listeners: [{
                             eventName: BI.TextButton.EVENT_CHANGE,
                             action: function () {
@@ -37,7 +37,7 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, {
                         type: "bi.text_button",
                         cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
                         shadow: true,
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         text: BI.i18nText("BI-Multi_Date_Today"),
                         disabled: this._checkTodayValid(),
                         ref: function () {
@@ -52,7 +52,7 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, {
                     }, {
                         type: "bi.text_button",
                         cls: "bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_OK"),
                         listeners: [{
diff --git a/src/widget/dynamicdatetime/dynamicdatetime.combo.js b/src/widget/dynamicdatetime/dynamicdatetime.combo.js
index 176eff1ae..5077d7866 100644
--- a/src/widget/dynamicdatetime/dynamicdatetime.combo.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.combo.js
@@ -50,13 +50,13 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                     el: {
                         type: "bi.horizontal_fill",
                         columnSize: [this.constants.iconWidth, "fill"],
-                        height: opts.height - border,
+                        height: BI.pixFormat(opts.height, border),
                         items: [{
                             el: {
                                 type: "bi.icon_button",
                                 cls: "bi-trigger-icon-button date-change-h-font",
                                 width: this.constants.iconWidth,
-                                height: opts.height - border,
+                                height: BI.pixFormat(opts.height, border),
                                 ref: function () {
                                     self.changeIcon = this;
                                 }
@@ -70,7 +70,7 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                             watermark: opts.watermark,
                             format: opts.format,
                             iconWidth: this.constants.iconWidth,
-                            height: opts.height - border,
+                            height: BI.pixFormat(opts.height, border),
                             value: opts.value,
                             ref: function () {
                                 self.trigger = this;
diff --git a/src/widget/dynamicdatetime/dynamicdatetime.popup.js b/src/widget/dynamicdatetime/dynamicdatetime.popup.js
index a06b3764e..cf57d339e 100644
--- a/src/widget/dynamicdatetime/dynamicdatetime.popup.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.popup.js
@@ -25,7 +25,7 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, {
                     items: [[{
                         type: "bi.text_button",
                         cls: "bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_Clear"),
                         listeners: [{
@@ -37,7 +37,7 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, {
                     }, {
                         type: "bi.text_button",
                         cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Multi_Date_Today"),
                         disabled: this._checkTodayValid(),
@@ -53,7 +53,7 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, {
                     }, {
                         type: "bi.text_button",
                         cls: "bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_OK"),
                         listeners: [{
diff --git a/src/widget/editor/editor.search.js b/src/widget/editor/editor.search.js
index b1747849a..fea367c66 100644
--- a/src/widget/editor/editor.search.js
+++ b/src/widget/editor/editor.search.js
@@ -15,13 +15,12 @@ BI.SearchEditor = BI.inherit(BI.Widget, {
         });
     },
     _init: function () {
-        this.options.height -= this.options.simple ? 1 : 2;
         BI.SearchEditor.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this.editor = BI.createWidget(o.el, {
             type: "bi.editor",
             simple: o.simple,
-            height: o.height,
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             watermark: o.watermark,
             allowBlank: true,
             hgap: 1,
@@ -45,6 +44,7 @@ BI.SearchEditor = BI.inherit(BI.Widget, {
         });
         BI.createWidget({
             element: this,
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             type: "bi.htape",
             items: [
                 {
diff --git a/src/widget/editor/editor.text.js b/src/widget/editor/editor.text.js
index 02644b044..850ad257c 100644
--- a/src/widget/editor/editor.text.js
+++ b/src/widget/editor/editor.text.js
@@ -26,15 +26,11 @@ BI.TextEditor = BI.inherit(BI.Widget, {
     render: function () {
         var self = this, o = this.options;
         var border = o.simple ? 1 : 2;
-        if (BI.isNumber(o.height)) {
-            this.element.css({ height: o.height - border });
-        }
-        if (BI.isNumber(o.width)) {
-            this.element.css({ width: o.width - border });
-        }
         this.editor = BI.createWidget({
             type: "bi.editor",
             element: this,
+            width: BI.pixFormat(o.width, border),
+            height: BI.pixFormat(o.height, border),
             simple: o.simple,
             hgap: o.hgap,
             vgap: o.vgap,
diff --git a/src/widget/intervalslider/intervalslider.js b/src/widget/intervalslider/intervalslider.js
index 130165680..739927972 100644
--- a/src/widget/intervalslider/intervalslider.js
+++ b/src/widget/intervalslider/intervalslider.js
@@ -60,8 +60,8 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             cls: "slider-editor-button",
             text: this.options.unit,
             allowBlank: false,
-            width: c.EDITOR_WIDTH - 2,
-            height: c.EDITOR_HEIGHT - 2,
+            width: BI.pixFormat(c.EDITOR_WIDTH, 2),
+            height: BI.pixFormat(c.EDITOR_HEIGHT, 2),
             validationChecker: function (v) {
                 return self._checkValidation(v);
             }
@@ -88,8 +88,8 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             cls: "slider-editor-button",
             text: this.options.unit,
             allowBlank: false,
-            width: c.EDITOR_WIDTH - 2,
-            height: c.EDITOR_HEIGHT - 2,
+            width: BI.pixFormat(c.EDITOR_WIDTH, 2),
+            height: BI.pixFormat(c.EDITOR_HEIGHT, 2),
             validationChecker: function (v) {
                 return self._checkValidation(v);
             }
diff --git a/src/widget/multilayerselecttree/multilayerselecttree.combo.js b/src/widget/multilayerselecttree/multilayerselecttree.combo.js
index 7263346b0..6be90346a 100644
--- a/src/widget/multilayerselecttree/multilayerselecttree.combo.js
+++ b/src/widget/multilayerselecttree/multilayerselecttree.combo.js
@@ -21,13 +21,6 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        var o = this.options;
-        BI.isNumeric(o.width) && (o.width -= 2);
-        BI.isNumeric(o.height) && (o.height -= 2);
-        BI.MultiLayerSelectTreeCombo.superclass._init.apply(this, arguments);
-    },
-
     render: function () {
         var self = this, o = this.options;
 
@@ -38,6 +31,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
         if (o.allowEdit) {
             return {
                 type: "bi.absolute",
+                width: BI.pixFormat(o.width, 2),
+                height: BI.pixFormat(o.height, 2),
                 cls,
                 items: [
                     {
@@ -59,7 +54,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
                 },
                 text: o.text,
                 defaultText: o.defaultText,
-                height: o.height,
+                height: BI.pixFormat(o.height, 2),
                 items: o.items,
                 value: o.value,
                 tipType: o.tipType,
@@ -73,6 +68,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         return {
             type: "bi.combo",
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
             container: o.container,
             destroyWhenHide: o.destroyWhenHide,
             adjustLength: 2,
@@ -136,8 +133,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
                 itemsCreator: o.itemsCreator,
                 valueFormatter: o.valueFormatter,
                 watermark: o.watermark,
-                // height: o.height - (o.simple ? 1 : 2),
-                height: o.height,
+                height: BI.pixFormat(o.height, 2),
                 text: o.text,
                 defaultText: o.defaultText,
                 value: o.value,
@@ -213,8 +209,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
             ref: function (_ref) {
                 self.triggerBtn = _ref;
             },
-            width: o.height,
-            height: o.height,
+            width: BI.pixFormat(o.height, 2),
+            height: BI.pixFormat(o.height, 2),
             listeners: [
                 {
                     eventName: BI.TriggerIconButton.EVENT_CHANGE,
diff --git a/src/widget/multilayerselecttree/multilayerselecttree.popup.js b/src/widget/multilayerselecttree/multilayerselecttree.popup.js
index dd29ce6e9..34dce3a58 100644
--- a/src/widget/multilayerselecttree/multilayerselecttree.popup.js
+++ b/src/widget/multilayerselecttree/multilayerselecttree.popup.js
@@ -56,7 +56,7 @@ BI.MultiLayerSelectTreePopup = BI.inherit(BI.Widget, {
             self.fireEvent(BI.MultiLayerSelectTreePopup.EVENT_CHANGE);
         });
 
-        this.tree.css("min-height", o.minHeight - 10);
+        this.tree.css("min-height", BI.pixFormat(o.minHeight - 10));
     },
 
     getValue: function () {
diff --git a/src/widget/multilayersingletree/multilayersingletree.combo.js b/src/widget/multilayersingletree/multilayersingletree.combo.js
index f35f25c80..d63207f6a 100644
--- a/src/widget/multilayersingletree/multilayersingletree.combo.js
+++ b/src/widget/multilayersingletree/multilayersingletree.combo.js
@@ -23,13 +23,6 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        var o = this.options;
-        BI.isNumeric(o.width) && (o.width -= 2);
-        BI.isNumeric(o.height) && (o.height -= 2);
-        BI.MultiLayerSingleTreeCombo.superclass._init.apply(this, arguments);
-    },
-
     render: function () {
         var self = this, o = this.options;
 
@@ -40,6 +33,8 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
         if (o.allowEdit) {
             return {
                 type: "bi.absolute",
+                width: BI.pixFormat(o.width, 2),
+                height: BI.pixFormat(o.height, 2),
                 cls,
                 items: [
                     {
@@ -61,7 +56,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
                 },
                 text: o.text,
                 defaultText: o.defaultText,
-                height: o.height,
+                height: BI.pixFormat(o.height, 2),
                 items: o.items,
                 value: o.value,
                 tipType: o.tipType,
@@ -136,7 +131,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
                 items: o.items,
                 itemsCreator: o.itemsCreator,
                 valueFormatter: o.valueFormatter,
-                height: o.height,
+                height: BI.pixFormat(o.height, 2),
                 text: o.text,
                 defaultText: o.defaultText,
                 value: o.value,
@@ -210,8 +205,8 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
             ref: function (_ref) {
                 self.triggerBtn = _ref;
             },
-            width: o.height,
-            height: o.height,
+            width: BI.pixFormat(o.height, 2),
+            height: BI.pixFormat(o.height, 2),
             listeners: [
                 {
                     eventName: BI.TriggerIconButton.EVENT_CHANGE,
diff --git a/src/widget/multilayersingletree/multilayersingletree.popup.js b/src/widget/multilayersingletree/multilayersingletree.popup.js
index 160c67a3c..630c38237 100644
--- a/src/widget/multilayersingletree/multilayersingletree.popup.js
+++ b/src/widget/multilayersingletree/multilayersingletree.popup.js
@@ -55,7 +55,7 @@ BI.MultiLayerSingleTreePopup = BI.inherit(BI.Widget, {
             self.fireEvent(BI.MultiLayerSingleTreePopup.EVENT_CHANGE);
         });
 
-        this.tree.css("min-height", o.minHeight - 10);
+        this.tree.css("min-height", BI.pixFormat(o.minHeight - 10));
     },
 
     getValue: function () {
diff --git a/src/widget/multiselect/multiselect.combo.js b/src/widget/multiselect/multiselect.combo.js
index 836193f96..807bffcdb 100644
--- a/src/widget/multiselect/multiselect.combo.js
+++ b/src/widget/multiselect/multiselect.combo.js
@@ -45,7 +45,7 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
         this.trigger = BI.createWidget({
             type: "bi.multi_select_trigger",
             allowEdit: o.allowEdit,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             text: o.text,
             defaultText: o.defaultText,
             masker: {
diff --git a/src/widget/multiselect/multiselect.combo.nobar.js b/src/widget/multiselect/multiselect.combo.nobar.js
index c2a0851c6..16b24855e 100644
--- a/src/widget/multiselect/multiselect.combo.nobar.js
+++ b/src/widget/multiselect/multiselect.combo.nobar.js
@@ -41,7 +41,7 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
 
         this.trigger = BI.createWidget({
             type: "bi.multi_select_trigger",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             text: o.text,
             defaultText: o.defaultText,
             masker: {
diff --git a/src/widget/multiselect/multiselect.insert.combo.js b/src/widget/multiselect/multiselect.insert.combo.js
index eee22c4db..b473b4628 100644
--- a/src/widget/multiselect/multiselect.insert.combo.js
+++ b/src/widget/multiselect/multiselect.insert.combo.js
@@ -40,7 +40,7 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
         this.trigger = BI.createWidget({
             type: "bi.multi_select_insert_trigger",
             allowEdit: o.allowEdit,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             text: o.text,
             watermark: o.watermark,
             defaultText: o.defaultText,
diff --git a/src/widget/multiselect/multiselect.insert.combo.nobar.js b/src/widget/multiselect/multiselect.insert.combo.nobar.js
index bb4a71ac1..ad47d1608 100644
--- a/src/widget/multiselect/multiselect.insert.combo.nobar.js
+++ b/src/widget/multiselect/multiselect.insert.combo.nobar.js
@@ -41,7 +41,7 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
 
         this.trigger = BI.createWidget({
             type: "bi.multi_select_insert_trigger",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             text: o.text,
             // adapter: this.popup,
             masker: {
diff --git a/src/widget/multiselect/multiselect.loader.nobar.js b/src/widget/multiselect/multiselect.loader.nobar.js
index d865b6d6b..c8e259cd3 100644
--- a/src/widget/multiselect/multiselect.loader.nobar.js
+++ b/src/widget/multiselect/multiselect.loader.nobar.js
@@ -173,7 +173,7 @@ BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, {
     },
 
     resetHeight: function (h) {
-        this.button_group.element.css({ "max-height": h / BI.pixRatio + BI.pixUnit });
+        this.button_group.element.css({ "max-height": BI.pixFormat(h) });
     },
 
     resetWidth: function () {
diff --git a/src/widget/multitree/multi.tree.combo.js b/src/widget/multitree/multi.tree.combo.js
index 1b533525d..83b0cb741 100644
--- a/src/widget/multitree/multi.tree.combo.js
+++ b/src/widget/multitree/multi.tree.combo.js
@@ -27,7 +27,7 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
         this.trigger = BI.createWidget({
             type: "bi.multi_select_trigger",
             allowEdit: o.allowEdit,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             valueFormatter: o.valueFormatter,
             text: o.text,
             defaultText: o.defaultText,
diff --git a/src/widget/multitree/multi.tree.insert.combo.js b/src/widget/multitree/multi.tree.insert.combo.js
index 692505da0..ab3922f13 100644
--- a/src/widget/multitree/multi.tree.insert.combo.js
+++ b/src/widget/multitree/multi.tree.insert.combo.js
@@ -28,7 +28,7 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
         this.trigger = BI.createWidget({
             type: "bi.multi_select_trigger",
             allowEdit: o.allowEdit,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             valueFormatter: o.valueFormatter,
             text: o.text,
             defaultText: o.defaultText,
diff --git a/src/widget/multitree/multi.tree.list.combo.js b/src/widget/multitree/multi.tree.list.combo.js
index bf7eaaf78..41a3d15a8 100644
--- a/src/widget/multitree/multi.tree.list.combo.js
+++ b/src/widget/multitree/multi.tree.list.combo.js
@@ -32,7 +32,7 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
             text: o.text,
             defaultText: o.defaultText,
             watermark: o.watermark,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             valueFormatter: o.valueFormatter,
             masker: {
                 offset: {
diff --git a/src/widget/numbereditor/number.editor.js b/src/widget/numbereditor/number.editor.js
index 3e99c6677..0dead38cf 100644
--- a/src/widget/numbereditor/number.editor.js
+++ b/src/widget/numbereditor/number.editor.js
@@ -27,7 +27,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         this.editor = BI.createWidget({
             type: "bi.sign_editor",
-            height: o.height - 2,
+            height: BI.pixFormat(o.height, 2),
             simple: o.simple,
             allowBlank: o.allowBlank,
             value: o.valueFormatter(o.value),
@@ -87,7 +87,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
         });
         BI.createWidget({
             type: "bi.htape",
-            height: o.height - 2,
+            height: BI.pixFormat(o.height, 2),
             element: this,
             items: [this.editor, {
                 el: {
diff --git a/src/widget/numberinterval/numberinterval.js b/src/widget/numberinterval/numberinterval.js
index 9fb76367f..c68de273b 100644
--- a/src/widget/numberinterval/numberinterval.js
+++ b/src/widget/numberinterval/numberinterval.js
@@ -36,7 +36,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
         BI.NumberInterval.superclass._init.apply(this, arguments);
         this.smallEditor = BI.createWidget({
             type: "bi.number_interval_single_editor",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             watermark: o.watermark,
             allowBlank: o.allowBlank,
             value: o.min,
@@ -61,7 +61,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
         this.smallTip = BI.createWidget({
             type: "bi.label",
             text: o.numTip,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             invisible: true
         });
         BI.createWidget({
@@ -76,7 +76,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
 
         this.bigEditor = BI.createWidget({
             type: "bi.number_interval_single_editor",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             watermark: o.watermark,
             allowBlank: o.allowBlank,
             value: o.max,
@@ -99,7 +99,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
         this.bigTip = BI.createWidget({
             type: "bi.label",
             text: o.numTip,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             invisible: true
         });
         BI.createWidget({
@@ -114,7 +114,8 @@ BI.NumberInterval = BI.inherit(BI.Single, {
         this.smallCombo = BI.createWidget({
             type: "bi.icon_combo",
             cls: "number-interval-small-combo" + (o.simple ? "" : " bi-border-top bi-border-bottom bi-border-right bi-border-corner-right-radius"),
-            height: o.height - (o.simple ? 0 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 0 : 2),
+            width: BI.pixFormat(c.width, c.border),
             items: [{
                 text: "(" + BI.i18nText("BI-Less_Than") + ")",
                 iconCls: "less-font",
@@ -133,7 +134,8 @@ BI.NumberInterval = BI.inherit(BI.Single, {
         this.bigCombo = BI.createWidget({
             type: "bi.icon_combo",
             cls: "number-interval-big-combo" + (o.simple ? "" : " bi-border-top bi-border-bottom bi-border-left bi-border-corner-left-radius"),
-            height: o.height - (o.simple ? 0 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 0 : 2),
+            width: BI.pixFormat(c.width, c.border),
             items: [{
                 text: "(" + BI.i18nText("BI-Less_Than") + ")",
                 iconCls: "less-font",
@@ -152,71 +154,83 @@ BI.NumberInterval = BI.inherit(BI.Single, {
         this.label = BI.createWidget({
             type: "bi.label",
             text: BI.i18nText("BI-Basic_Value"),
-            textHeight: o.height - (o.simple ? 0 : c.border * 2),
-            width: c.width - (o.simple ? 0 : c.border * 2),
-            height: o.height - (o.simple ? 0 : c.border * 2),
+            textHeight: o.height,
+            // width: BI.pixFormat(o.width, o.simple ? 0 : c.border * 2),
+            hgap: 5,
+            height: o.height,
             level: "warning",
             tipType: "warning"
         });
         this.left = BI.createWidget({
-            type: "bi.htape",
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", ""],
             items: [{
                 el: self.smallEditor
             }, {
                 el: self.smallCombo,
-                width: c.width - c.border
             }]
 
         });
         this.right = BI.createWidget({
-            type: "bi.htape",
+            type: "bi.horizontal_fill",
+            columnSize: ["", "fill"],
             items: [{
                 el: self.bigCombo,
-                width: c.width - c.border
             }, {
                 el: self.bigEditor,
                 // BI-23883 间距考虑边框
-                lgap: 1
+                // lgap: 1
             }]
         });
 
-
-        BI.createWidget({
-            element: self,
-            type: "bi.center",
-            hgap: 15,
-            height: o.height,
-            items: [
-                {
-                    type: "bi.absolute",
-                    items: [{
-                        el: self.left,
-                        left: -15,
-                        right: 0,
-                        top: 0,
-                        bottom: 0
-                    }]
-                }, {
-                    type: "bi.absolute",
-                    items: [{
-                        el: self.right,
-                        left: 0,
-                        right: -15,
-                        top: 0,
-                        bottom: 0
-                    }]
-                }
-            ]
-        });
-
         BI.createWidget({
             element: self,
-            type: "bi.horizontal_auto",
-            items: [
-                self.label
-            ]
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
+            items: [{
+                el: self.left
+            }, {
+                el: self.label
+            }, {
+                el: self.right
+            }]
         });
 
+        // BI.createWidget({
+        //     element: self,
+        //     type: "bi.horizontal_auto",
+        //     items: [
+        //         self.label
+        //     ]
+        // });
+
+        // BI.createWidget({
+        //     element: self,
+        //     type: "bi.center",
+        //     hgap: 15,
+        //     height: o.height,
+        //     items: [
+        //         {
+        //             type: "bi.absolute",
+        //             items: [{
+        //                 el: self.left,
+        //                 left: -15,
+        //                 right: 0,
+        //                 top: 0,
+        //                 bottom: 0
+        //             }]
+        //         }, {
+        //             type: "bi.absolute",
+        //             items: [{
+        //                 el: self.right,
+        //                 left: 0,
+        //                 right: -15,
+        //                 top: 0,
+        //                 bottom: 0
+        //             }]
+        //         }
+        //     ]
+        // });
 
         self._setValidEvent(self.bigEditor, c.bigEditor);
         self._setValidEvent(self.smallEditor, c.smallEditor);
diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js
index a3def7ccf..e6259e684 100644
--- a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js
+++ b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js
@@ -35,7 +35,7 @@ BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, {
         this.trigger = BI.createWidget({
             type: "bi.search_multi_select_trigger",
             text: o.text,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             // adapter: this.popup,
             masker: {
                 offset: {
diff --git a/src/widget/selecttree/selecttree.combo.js b/src/widget/selecttree/selecttree.combo.js
index c6aca0c62..5f2147bae 100644
--- a/src/widget/selecttree/selecttree.combo.js
+++ b/src/widget/selecttree/selecttree.combo.js
@@ -17,14 +17,12 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
 
     _init: function () {
         var self = this, o = this.options;
-        o.height -= 2;
-        BI.isNumeric(o.width) && (o.width -= 2);
         BI.SelectTreeCombo.superclass._init.apply(this, arguments);
 
         this.trigger = BI.createWidget({
             type: "bi.single_tree_trigger",
             text: o.text,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
             items: o.items,
             value: o.value,
             allowClear: o.allowClear,
@@ -43,6 +41,8 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
             container: o.container,
             element: this,
             adjustLength: 2,
diff --git a/src/widget/singleselect/singleselect.combo.js b/src/widget/singleselect/singleselect.combo.js
index fac81d8d7..81140cfd0 100644
--- a/src/widget/singleselect/singleselect.combo.js
+++ b/src/widget/singleselect/singleselect.combo.js
@@ -31,7 +31,7 @@ BI.SingleSelectCombo = BI.inherit(BI.Single, {
 
         this.trigger = BI.createWidget({
             type: "bi.single_select_trigger",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             // adapter: this.popup,
             allowNoSelect: o.allowNoSelect,
             allowEdit: o.allowEdit,
diff --git a/src/widget/singleselect/singleselect.insert.combo.js b/src/widget/singleselect/singleselect.insert.combo.js
index faa3511be..039283d79 100644
--- a/src/widget/singleselect/singleselect.insert.combo.js
+++ b/src/widget/singleselect/singleselect.insert.combo.js
@@ -32,7 +32,7 @@ BI.SingleSelectInsertCombo = BI.inherit(BI.Single, {
         this.trigger = BI.createWidget({
             type: "bi.single_select_trigger",
             watermark: o.watermark,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
             allowNoSelect: o.allowNoSelect,
             allowEdit: o.allowEdit,
             // adapter: this.popup,
diff --git a/src/widget/singleselect/singleselect.list.js b/src/widget/singleselect/singleselect.list.js
index e09ed5f1a..9842eb3ea 100644
--- a/src/widget/singleselect/singleselect.list.js
+++ b/src/widget/singleselect/singleselect.list.js
@@ -120,7 +120,7 @@ BI.SingleSelectList = BI.inherit(BI.Widget, {
 
     resetHeight: function (h) {
         this.list.resetHeight ? this.list.resetHeight(h) :
-            this.list.element.css({"max-height": (h - (this.options.allowNoSelect ? this._constants.itemHeight : 0)) / BI.pixRatio + BI.pixUnit});
+            this.list.element.css({"max-height": BI.pixFormat(h - (this.options.allowNoSelect ? this._constants.itemHeight : 0))});
     },
 
     setNotSelectedValue: function () {
diff --git a/src/widget/singleslider/singleslider.js b/src/widget/singleslider/singleslider.js
index a330115b9..db9f83caa 100644
--- a/src/widget/singleslider/singleslider.js
+++ b/src/widget/singleslider/singleslider.js
@@ -91,8 +91,8 @@ BI.SingleSlider = BI.inherit(BI.Single, {
             type: "bi.sign_text_editor",
             cls: "slider-editor-button",
             text: o.unit,
-            width: c.EDITOR_WIDTH - 2,
-            height: c.EDITOR_HEIGHT - 2,
+            width: BI.pixFormat(c.EDITOR_WIDTH, 2),
+            height: BI.pixFormat(c.EDITOR_HEIGHT, 2),
             allowBlank: false,
             textAlign: "center",
             validationChecker: function (v) {
diff --git a/src/widget/singleslider/singleslider.label.js b/src/widget/singleslider/singleslider.label.js
index d6b8aa639..8f4e9bbb6 100644
--- a/src/widget/singleslider/singleslider.label.js
+++ b/src/widget/singleslider/singleslider.label.js
@@ -90,7 +90,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
         this.label = BI.createWidget({
             type: "bi.label",
             height: c.HEIGHT,
-            width: c.EDITOR_WIDTH - 2
+            width: BI.pixFormat(c.EDITOR_WIDTH, 2)
         });
 
         this._setVisible(false);
diff --git a/src/widget/singletree/singletree.combo.js b/src/widget/singletree/singletree.combo.js
index c42392db8..2c9319c59 100644
--- a/src/widget/singletree/singletree.combo.js
+++ b/src/widget/singletree/singletree.combo.js
@@ -18,15 +18,13 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
 
     _init: function () {
         var self = this, o = this.options;
-        o.height -= 2;
-        BI.isNumeric(o.width) && (o.width -= 2);
         BI.SingleTreeCombo.superclass._init.apply(this, arguments);
 
         this.trigger = BI.createWidget(BI.extend({
             type: "bi.single_tree_trigger",
             text: o.text,
             defaultText: o.defaultText,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
             items: o.items,
             value: o.value,
             allowClear: o.allowClear,
@@ -45,6 +43,8 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
             container: o.container,
             element: this,
             adjustLength: 2,
diff --git a/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js b/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
index ff56fff45..146472c30 100644
--- a/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
+++ b/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
@@ -12,8 +12,6 @@ BI.TextValueDownListCombo = BI.inherit(BI.Widget, {
 
     _init: function () {
         var self = this, o = this.options;
-        o.height -= 2;
-        BI.isNumeric(o.width) && (o.width -= 2);
         BI.TextValueDownListCombo.superclass._init.apply(this, arguments);
         this._createValueMap();
 
@@ -24,7 +22,7 @@ BI.TextValueDownListCombo = BI.inherit(BI.Widget, {
         this.trigger = BI.createWidget({
             type: "bi.down_list_select_text_trigger",
             cls: "text-value-down-list-trigger",
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
             items: o.items,
             text: o.text,
             value: value
@@ -35,7 +33,8 @@ BI.TextValueDownListCombo = BI.inherit(BI.Widget, {
             element: this,
             chooseType: BI.Selection.Single,
             adjustLength: 2,
-            height: o.height,
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
             el: this.trigger,
             value: BI.isNull(value) ? [] : [value],
             items: BI.deepClone(o.items)
diff --git a/src/widget/time/time.combo.js b/src/widget/time/time.combo.js
index 866bb513a..1ba03c2d3 100644
--- a/src/widget/time/time.combo.js
+++ b/src/widget/time/time.combo.js
@@ -72,10 +72,10 @@
                         el: {
                             type: "bi.horizontal_fill",
                             columnSize: ["fill", this.constants.iconWidth],
-                            height: opts.height - 2,
+                            height: BI.pixFormat(opts.height, 2),
                             items: [{
                                 type: "bi.time_trigger",
-                                height: opts.height - 2,
+                                height: BI.pixFormat(opts.height, 2),
                                 allowEdit: opts.allowEdit,
                                 watermark: opts.watermark,
                                 format: opts.format,
diff --git a/src/widget/timeinterval/dateinterval.js b/src/widget/timeinterval/dateinterval.js
index f6b2176c6..2da77de8b 100644
--- a/src/widget/timeinterval/dateinterval.js
+++ b/src/widget/timeinterval/dateinterval.js
@@ -19,50 +19,32 @@ BI.DateInterval = BI.inherit(BI.Single, {
             supportDynamic: true,
         });
     },
-    _init: function () {
+    
+    render: function () {
         var self = this, o = this.options;
-        BI.DateInterval.superclass._init.apply(this, arguments);
-
         o.value = o.value || {};
         this.left = this._createCombo(o.value.start, o.watermark?.start);
         this.right = this._createCombo(o.value.end, o.watermark?.end);
-        this.label = BI.createWidget({
-            type: "bi.label",
-            height: o.height,
-            width: this.constants.width,
-            text: "-"
-        });
-        BI.createWidget({
-            element: self,
-            type: "bi.center",
-            height: o.height,
+
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
             items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: this.constants.width / 2,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
             }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: this.constants.width / 2,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
+                }
+            }, {
+                el: self.right
             }]
-        });
-        BI.createWidget({
-            type: "bi.horizontal_auto",
-            element: this,
-            items: [
-                self.label
-            ]
-        });
+        };
     },
 
     _createCombo: function (v, watermark) {
diff --git a/src/widget/timeinterval/timeinterval.js b/src/widget/timeinterval/timeinterval.js
index 3910c77e8..c22c8e14e 100644
--- a/src/widget/timeinterval/timeinterval.js
+++ b/src/widget/timeinterval/timeinterval.js
@@ -19,50 +19,32 @@ BI.TimeInterval = BI.inherit(BI.Single, {
             supportDynamic: true
         });
     },
-    _init: function () {
-        var self = this, o = this.options;
-        BI.TimeInterval.superclass._init.apply(this, arguments);
 
+    render: function () {
+        var self = this, o = this.options;
         o.value = o.value || {};
         this.left = this._createCombo(o.value.start, o.watermark?.start);
         this.right = this._createCombo(o.value.end, o.watermark?.end);
-        this.label = BI.createWidget({
-            type: "bi.label",
-            height: o.height,
-            width: this.constants.width,
-            text: "-"
-        });
-        BI.createWidget({
-            element: self,
-            type: "bi.center",
-            height: o.height,
+
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
             items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: this.constants.width / 2,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
+            }, {
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
+                }
             }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: this.constants.width / 2,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.right
             }]
-        });
-        BI.createWidget({
-            type: "bi.horizontal_auto",
-            element: this,
-            items: [
-                self.label
-            ]
-        });
+        };
     },
 
     _createCombo: function (v, watermark) {
diff --git a/src/widget/timeinterval/timeperiods.js b/src/widget/timeinterval/timeperiods.js
index 5a0edf56d..a8bb9e60b 100644
--- a/src/widget/timeinterval/timeperiods.js
+++ b/src/widget/timeinterval/timeperiods.js
@@ -16,66 +16,35 @@
             extraCls: "bi-time-interval",
             value: {}
         },
+        
         render: function () {
             var self = this, o = this.options;
 
             return {
-                type: "bi.absolute",
-                height: o.height,
+                type: "bi.horizontal_fill",
+                columnSize: ["fill", "", "fill"],
                 items: [{
-                    el: {
-                        type: "bi.horizontal_auto",
-                        items: [{
-                            type: "bi.label",
-                            height: o.height,
-                            width: this.constants.width,
-                            text: "-",
-                            ref: function (_ref) {
-                                self.label = _ref;
-                            }
-                        }]
-                    },
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0
+                    el: BI.extend({
+                        ref: function (_ref) {
+                            self.left = _ref;
+                        }
+                    }, this._createCombo(o.value.start, o.watermark?.start))
                 }, {
                     el: {
-                        type: "bi.center",
+                        type: "bi.label",
                         height: o.height,
-                        hgap: this.constants.hgap,
-                        items: [{
-                            type: "bi.absolute",
-                            items: [{
-                                el: BI.extend({
-                                    ref: function (_ref) {
-                                        self.left = _ref;
-                                    }
-                                }, this._createCombo(o.value.start, o.watermark?.start)),
-                                left: this.constants.offset,
-                                right: 0,
-                                top: 0,
-                                bottom: 0,
-                            }]
-                        }, {
-                            type: "bi.absolute",
-                            items: [{
-                                el: BI.extend({
-                                    ref: function (_ref) {
-                                        self.right = _ref;
-                                    }
-                                }, this._createCombo(o.value.end, o.watermark?.end)),
-                                left: 0,
-                                right: this.constants.offset,
-                                top: 0,
-                                bottom: 0,
-                            }]
-                        }]
-                    },
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0
+                        hgap: 5,
+                        text: "-",
+                        ref: function (_ref) {
+                            self.label = _ref;
+                        }
+                    }
+                }, {
+                    el: BI.extend({
+                        ref: function (_ref) {
+                            self.right = _ref;
+                        }
+                    }, this._createCombo(o.value.end, o.watermark?.end))
                 }]
             };
         },
diff --git a/src/widget/year/combo.year.js b/src/widget/year/combo.year.js
index cf6485d13..c9f456a1b 100644
--- a/src/widget/year/combo.year.js
+++ b/src/widget/year/combo.year.js
@@ -23,7 +23,7 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
             simple: o.simple,
             min: o.minDate,
             max: o.maxDate,
-            height: o.height - border,
+            height: BI.pixFormat(o.height, border),
             value: o.value || "",
             watermark: o.watermark
         });
@@ -132,7 +132,8 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
             element: this,
             items: [{
                 el: {
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["", "fill"],
                     cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
@@ -142,12 +143,11 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button",
                             width: this._const.iconWidth,
-                            height: o.height - border,
+                            height: BI.pixFormat(o.height, border),
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                        width: this._const.iconWidth
                     }, this.combo]
                 },
                 top: 0,
@@ -167,12 +167,8 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
         switch (type) {
             case BI.DynamicYearCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
-                this.comboWrapper.resize();
                 break;
             default:
-                this.comboWrapper.attr("items")[0].width = 0;
-                this.comboWrapper.resize();
                 this.changeIcon.setVisible(false);
                 break;
         }
diff --git a/src/widget/year/popup.year.js b/src/widget/year/popup.year.js
index 7645f3974..6a7c883c6 100644
--- a/src/widget/year/popup.year.js
+++ b/src/widget/year/popup.year.js
@@ -32,7 +32,7 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, {
                     items: [[{
                         type: "bi.text_button",
                         cls: "bi-split-top bi-high-light",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_Clear"),
                         listeners: [{
@@ -43,7 +43,7 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, {
                         }]
                     }, {
                         type: "bi.text_button",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
                         shadow: true,
                         text: BI.i18nText("BI-Basic_Current_Year"),
@@ -60,7 +60,7 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, {
                     }, {
                         type: "bi.text_button",
                         cls: "bi-split-top bi-high-light",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_OK"),
                         listeners: [{
diff --git a/src/widget/yearinterval/yearinterval.js b/src/widget/yearinterval/yearinterval.js
index 9f48d7f5f..56756e60c 100644
--- a/src/widget/yearinterval/yearinterval.js
+++ b/src/widget/yearinterval/yearinterval.js
@@ -26,41 +26,25 @@ BI.YearInterval = BI.inherit(BI.Single, {
         this.left = this._createCombo(o.value.start, o.watermark?.start);
         this.right = this._createCombo(o.value.end, o.watermark?.end);
 
-        return [{
-            type: "bi.center",
-            hgap: 15,
-            height: o.height,
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
             items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: 0,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
             }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: 0,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
-            }]
-        }, {
-            type: "bi.horizontal_auto",
-            items: [{
-                type: "bi.label",
-                height: o.height,
-                width: this.constants.width,
-                text: "-",
-                ref: function (_ref) {
-                    self.label = _ref;
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
                 }
+            }, {
+                el: self.right
             }]
-        }]
+        };
     },
 
     _createCombo: function (v, watermark) {
diff --git a/src/widget/yearmonth/card.static.yearmonth.js b/src/widget/yearmonth/card.static.yearmonth.js
index 251b5871c..c0ababb9a 100644
--- a/src/widget/yearmonth/card.static.yearmonth.js
+++ b/src/widget/yearmonth/card.static.yearmonth.js
@@ -19,7 +19,7 @@ BI.StaticYearMonthCard = BI.inherit(BI.Widget, {
                     whiteSpace: "nowrap",
                     once: false,
                     forceSelected: true,
-                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT - 1,
+                    height: BI.pixFormat(BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, 1),
                     width: 38,
                     value: td,
                     text: td,
diff --git a/src/widget/yearmonth/combo.yearmonth.js b/src/widget/yearmonth/combo.yearmonth.js
index a6de2de6f..23b9dfd01 100644
--- a/src/widget/yearmonth/combo.yearmonth.js
+++ b/src/widget/yearmonth/combo.yearmonth.js
@@ -22,7 +22,7 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
             simple: o.simple,
             min: o.minDate,
             max: o.maxDate,
-            height: o.height - border,
+            height: BI.pixFormat(o.height, border),
             value: o.value || "",
             watermark: o.watermark,
         });
@@ -132,7 +132,8 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
             element: this,
             items: [{
                 el: {
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["", "fill"],
                     cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
@@ -141,13 +142,12 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
                         el: {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button",
-                            width: o.height - border,
-                            height: o.height - border,
+                            width: BI.pixFormat(o.height, border),
+                            height: BI.pixFormat(o.height, border),
                             ref: function () {
                                 self.changeIcon = this;
                             }
-                        },
-                        width: o.height - border
+                        }
                     }, this.combo]
                 },
                 top: 0,
@@ -167,12 +167,8 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
         switch (type) {
             case BI.DynamicYearMonthCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
-                this.comboWrapper.resize();
                 break;
             default:
-                this.comboWrapper.attr("items")[0].width = 0;
-                this.comboWrapper.resize();
                 this.changeIcon.setVisible(false);
                 break;
         }
diff --git a/src/widget/yearmonth/popup.yearmonth.js b/src/widget/yearmonth/popup.yearmonth.js
index c0d715efb..f1bcd11a2 100644
--- a/src/widget/yearmonth/popup.yearmonth.js
+++ b/src/widget/yearmonth/popup.yearmonth.js
@@ -32,7 +32,7 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, {
                     items: [[{
                         type: "bi.text_button",
                         cls: "bi-split-top bi-high-light",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_Clear"),
                         listeners: [{
@@ -44,7 +44,7 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, {
                     }, {
                         type: "bi.text_button",
                         cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_Current_Month"),
                         disabled: this._checkTodayValid(),
@@ -60,7 +60,7 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, {
                     }, {
                         type: "bi.text_button",
                         cls: "bi-split-top bi-high-light",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_OK"),
                         listeners: [{
diff --git a/src/widget/yearmonthinterval/yearmonthinterval.js b/src/widget/yearmonthinterval/yearmonthinterval.js
index 85e982e22..814123f67 100644
--- a/src/widget/yearmonthinterval/yearmonthinterval.js
+++ b/src/widget/yearmonthinterval/yearmonthinterval.js
@@ -14,51 +14,31 @@ BI.YearMonthInterval = BI.inherit(BI.Single, {
         height: 24
     },
 
-    _init: function () {
+    render: function () {
         var self = this, o = this.options;
-        BI.YearMonthInterval.superclass._init.apply(this, arguments);
-
         o.value = o.value || {};
         this.left = this._createCombo(o.value.start, o.watermark?.start);
         this.right = this._createCombo(o.value.end, o.watermark?.end);
-        this.label = BI.createWidget({
-            type: "bi.label",
-            height: o.height,
-            width: this.constants.width,
-            text: "-"
-        });
-        BI.createWidget({
-            element: self,
-            type: "bi.center",
-            hgap: 15,
-            height: o.height,
+        
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
             items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: 0,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
             }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: 0,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
+                }
+            }, {
+                el: self.right
             }]
-        });
-        BI.createWidget({
-            type: "bi.horizontal_auto",
-            element: this,
-            items: [
-                self.label
-            ]
-        });
+        };
     },
 
     _createCombo: function (v, watermark) {
diff --git a/src/widget/yearquarter/combo.yearquarter.js b/src/widget/yearquarter/combo.yearquarter.js
index 9ec93454b..0292ef55b 100644
--- a/src/widget/yearquarter/combo.yearquarter.js
+++ b/src/widget/yearquarter/combo.yearquarter.js
@@ -25,7 +25,7 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
             simple: o.simple,
             min: o.minDate,
             max: o.maxDate,
-            height: o.height - border,
+            height: BI.pixFormat(o.height, border),
             value: o.value || "",
             watermark: o.watermark,
         });
@@ -135,7 +135,8 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
             element: this,
             items: [{
                 el: {
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["", "fill"],
                     cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
@@ -145,12 +146,11 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button",
                             width: this._consts.iconWidth,
-                            height: o.height - border,
+                            height: BI.pixFormat(o.height, border),
                             ref: function () {
                                 self.changeIcon = this;
                             }
-                        },
-                        width: this._consts.iconWidth
+                        }
                     }, this.combo]
                 },
                 top: 0,
@@ -169,13 +169,9 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
         }
         switch (type) {
             case BI.DynamicYearQuarterCombo.Dynamic:
-                this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
                 this.comboWrapper.resize();
                 break;
             default:
-                this.comboWrapper.attr("items")[0].width = 0;
-                this.comboWrapper.resize();
                 this.changeIcon.setVisible(false);
                 break;
         }
diff --git a/src/widget/yearquarter/popup.yearquarter.js b/src/widget/yearquarter/popup.yearquarter.js
index bf8d7c392..638cebec3 100644
--- a/src/widget/yearquarter/popup.yearquarter.js
+++ b/src/widget/yearquarter/popup.yearquarter.js
@@ -27,7 +27,7 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, {
                         type: "bi.text_button",
                         cls: "bi-split-top bi-high-light",
                         shadow: true,
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         text: BI.i18nText("BI-Basic_Clear"),
                         listeners: [{
                             eventName: BI.TextButton.EVENT_CHANGE,
@@ -38,7 +38,7 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, {
                     }, {
                         type: "bi.text_button",
                         cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         shadow: true,
                         text: BI.i18nText("BI-Basic_Current_Quarter"),
                         disabled: this._checkTodayValid(),
@@ -55,7 +55,7 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, {
                         type: "bi.text_button",
                         cls: "bi-split-top bi-high-light",
                         shadow: true,
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                         text: BI.i18nText("BI-Basic_OK"),
                         listeners: [{
                             eventName: BI.TextButton.EVENT_CHANGE,
diff --git a/src/widget/yearquarterinterval/yearquarterinterval.js b/src/widget/yearquarterinterval/yearquarterinterval.js
index f23134a09..02a0c67d7 100644
--- a/src/widget/yearquarterinterval/yearquarterinterval.js
+++ b/src/widget/yearquarterinterval/yearquarterinterval.js
@@ -26,41 +26,26 @@ BI.YearQuarterInterval = BI.inherit(BI.Single, {
         this.left = this._createCombo(o.value.start, o.watermark?.start);
         this.right = this._createCombo(o.value.end, o.watermark?.end);
 
-        return [{
-            type: "bi.center",
-            hgap: 15,
-            height: o.height,
+
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
             items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: 0,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
             }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: 0,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
-            }]
-        }, {
-            type: "bi.horizontal_auto",
-            items: [{
-                type: "bi.label",
-                height: o.height,
-                width: this.constants.width,
-                text: "-",
-                ref: function (_ref) {
-                    self.label = _ref;
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
                 }
+            }, {
+                el: self.right
             }]
-        }]
+        };
     },
 
     _createCombo: function (v, watermark) {
diff --git a/template/index.html b/template/index.html
index 2d98bda7b..bcf5ad41a 100644
--- a/template/index.html
+++ b/template/index.html
@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html lang="en">
 
 <head>