javascript - 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 片段。因此，您在编程版本中看不到图标节点。