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 表明声明性 Button 包含 HTML 以支持从未实际显示的图标。程序化 Button 不会生成此类与图标相关的 HTML。不知道这会如何导致声明性 Button 更高，但我没有看到任何其他区别。

任何人都理解编程按钮和声明按钮之间的这种差异，以及如何避免这种差异？

感谢您提供的任何帮助。

谢谢。

Answer 1

您可以尝试在按钮的编程创建中将innerHTML 替换为label。

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

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

我进行了更改，现在按钮的高度似乎相同。

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