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之间的这种差异，以及如何避免这种差异？

感谢您提供的任何帮助。

感谢。

Answer 1

您可以尝试在程序化创建按钮中将innerHTML替换为label吗？

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

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

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

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

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

1 个答案: