javascript - 动态添加的引导按钮与标记中声明的按钮不同

Question

就像标题说的那样。。

我有这样的标记：

.spancenter {
    margin:0 auto !important; 
    float:none !important;
    text-align:center !important;
}

<div class="row-fluid">
    <div class="span12">
        <div class="spancenter">
            <input id="btnSave" name="btnSave" class="btn" type="button" value="Save" />
            <input id="btnCancel" name="btnCancel" class="btn" type="button" value="Cancel" />
        </div>
    </div>
</div>

如果我通过 AJAX 获得该 HTML（即字面上说它$('#divWrapper').html(thehtml);呈现不同的方式：

（上一个来自 AJAX，下一个是静态标记）

在 Firebug 中，它们看起来相同。

为什么它们的渲染方式不同？

Answer 1

输入是内联元素，因此在 HTML 中，就像上面的示例一样，它们之间会有一个空格。有几种方法可以摆脱它，其中一种是编写不带空格的 HTML，例如

<input type="button"
/><input type="button" />

或者

<input type="button" /><input type="button" />

您的 AJAX 响应可能是一个没有任何空格的字符串，所以就像使用这个 hack。这就是按钮不同的原因。

至于一般外观 - 它们是相同的。只需将最下面一行的按钮放在最上面的原始按钮上——你会发现这是一种错觉。