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 标签似乎是问题所在...文本看起来居中，但图像看起来略高于中心。尝试在图片标签的样式中直接添加 vertical-align: middle 属性。

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

这是一篇关于使用 display: table 和 vertical-align 的一些陷阱的相关 SO 帖子。

Vertically align text next to an image?

祝 friend 好运。