Dojo编程按钮比声明按钮更短？

Question

我正在运行Dojo1.9.1,并注意到在我已经修复按钮以及编程生成的按钮的页面上,程序化按钮更短.我在jsfiddle上重现了这个问题 https://jsfiddle.net/gregorco/6sn6998t/3/

HTML:

<div id="testDiv">
    <table>
        <tr>
            <td>
                <div id="divForProgButton"></div>
            </td>
            <td>
                <div>
                    <button data-dojo-type="dijit/form/Button" data-dojo-id="declaredButton" id="declaredButton" type="button">Declarative Button two pixels taller??</button>
                </div>
            </td>
        </tr>
    </table>
</div>

JAVASCRIPT:

require(["dojo/dom",
"dojo/parser", "dojo/dom-construct", "dijit/form/Button", "dojo/ready"], function (dom, parser, domConstruct, Button, ready) {
ready(function () {
    parser.parse("testDiv");
    var buttonsDiv = dom.byId("divForProgButton");
    var progButton = new Button({
        'id': 'programmaticButton',
            'name': 'programmaticButton',
            'innerHTML': 'Programmatic Button'
    });
    domConstruct.place(progButton.domNode, buttonsDiv);
    progButton.startup();
});
});

它很微妙,但你可以看到(以及与Firebug一起确认)第一个按钮更短.这里只有2个像素,但在我的系统上它缩短了4个像素 - 更加引人注目.我尝试了claro和tundra两个主题,两者都产生了相同的高度差异.

使用Firebug检查生成的HTML显示声明性按钮包含HTML,以支持从未实际显示的图标.程序化Button不会生成与此类图标相关的HTML.不知道这怎么可能导致声明性Button更高,但我没有看到任何其他差异.

任何人都能理解程序化Button和声明性Button之间的这种差异,以及如何避免这种差异？

我感谢您提供的任何帮助.

谢谢.

Answer 1

你可以尝试更换innerHTML用label的编程方式创建按钮.

var progButton = new Button({
        'id': 'programmaticButton',
            'name': 'programmaticButton',

            /* 'innerHTML': 'Programmatic Button' */
            'label': 'Programmatic Button'
    });

我做了改动,现在看来按钮的高度是一样的.

我的假设是innerHTML覆盖了由Dojo Dijit Machinery创建的HTML片段.因此,您在编程版本中看不到图标节点.