JQuery輸出不同於靜態示例

Question

我使用下面的jquery輸出中的純HTML創建了一個按鈕。靜態HTML是：

<a id="button1" title="Reset" style="padding: .5em .5em .5em .5em;" 
class="ctkit-button-light-gray 
     ctkit-button-rounded-light-gray 
     ctkit-button-enabled-light-gray"> 

    <div style="display: table; width: 100%;"> 

     <div style="display: table-cell; text-align: center;vertical-align: middle;"> 
      <img src="/Images/reset.png" title="Reset" style="border: 0px; width: 1.5em; height: 1.5em;"> 
     </div> 

     <div style="display: table-cell; text-align: center; vertical-align: middle;"> 
      <span style="padding-left: 2px;"> Reset</span> 
     </div> 
    </div> 
</a> 

用css：

.ctkit-button-light-gray 
{ 
    font-size: 12px; 
    font: "Arial, Helvetica, sans-serif"; 
    display: inline-block; 

    text-decoration:none; 
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3); 

} 

.ctkit-button-rounded-light-gray 
{ 
    -webkit-border-radius:.4em; 
    -moz-border-radius:.4em; 
    border-radius:0.4em; 
} 

.ctkit-button-enabled-light-gray 
{ 
    cursor: pointer; 
    cursor: hand; 
    color:#474747; 
    border: solid 1px #bcbcbc; 

    background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e3e2e2)); 
    background:-moz-linear-gradient(top, #ffffff, #e3e2e2); 
    background: -ms-linear-gradient(top, #ffffff, #e3e2e2); 
    opacity:1; 
    filters.alpha.opacity:100; 
} 

注意，圖像和文本的垂直對齊。

現在，當我使用jquery使用代碼來創建按鈕：

var settings = $(this).data('ctkit-button').data; 


var id = $(this)[0].id; 
var style = ''; 


var css = 'ctkit-button-' + settings.theme + ' '; 
if(settings.rounded) 
    css += 'ctkit-button-rounded-' + settings.theme + ' '; 
else 
    css += 'ctkit-button-normal-' + settings.theme + ' '; 

if(settings.enabled) 
    css += 'ctkit-button-enabled-' + settings.theme + ' '; 
else 
    css += 'ctkit-button-disabled-' + settings.theme + ' '; 
var div1 = $('<div />', 
{ 
}).attr('style', 'display: table; width: 100%; '); 

var div2 = $('<div />', 
{ 
}).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; '); 

style = 'border: 0px;'; 

if(settings.width.length > 0) 
    style += 'width: ' + settings.width + '; '; 
if(settings.height.length > 0) 
    style += 'height: ' + settings.height + ';' ; 

var img = $('<img />', 
{ 
    src : settings.image 
}).prop('title', settings.tooltip).attr('style', style); // 'border: 0px'); 

$(div1).append($(div2).append(img)); 

var div3 = $('<div />', 
{ 
}).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; '); 

var span = $('<span />', 
{ 
}).attr('style', 'padding-left: 2px;').html(settings.text); 

$(div1).append($(div3).append(span)); 
$(this).append(div1); 



$(this).prop('title', settings.tooltip); 
$(this).attr('style', settings.padding); 
$(this).addClass(css); 

其中設置的值是：

var settings = { 
    _instance: "", 
    theme: "light-gray", 
    tooltip: "", 
    image: "", 
    padding: "padding: .5em .5em .5em .5em;", 
    text: "", 
    enabled: true, 
    rounded: true, 
    width: "", 
    height: "" 
} 

我的按鈕心不是垂直對齊，並較大：

和事情是我上面的靜態代碼是取自jquery按鈕控制，我得到的HTML使用： var html = $（'html'）。html（）; 創建完成並創建一個靜態HTML文件，看看它看起來如何，它看起來是正確的。

所以我很困惑發生了什麼，併爲其修復。

Answer 1

我看到你定義使用jQuery你這樣的HTML元素：

var div1 = $("<div />", {}).attr(...); 

作爲一個有用的提示，那些花括號將在那裏你可以定義不同的屬性，所以真的沒有必要鏈.attr（）方法。

var div1 = var div1 = $('<div />', 
    {'style': 'display: table; width: 100%; '} 
); 

其次，它看來IMG標籤問題......文字看起來居中，但圖像看起來略高於中心。嘗試直接在圖像標記的樣式中添加垂直對齊：中間屬性。

var img = $('<img />', { 
    'src' : settings.image, 
    'title': settings.tooltip, 
    'style': 'vertical-align: middle; ' //add your other rules as well. 
}); 

下面是一些相關的SO帖子，關於一些使用display：table和vertical-align的問題。

Vertically align text next to an image?

好運friendo。