使用JQuery更改HTML按钮图像会导致样式问题

Question

我有一个标准的HTML按钮，按下时会触发一些Ajax。我正在使用JQuery来禁用按钮，并在等待返回时显示进度GIF。

由于某些原因，设置按钮的背景图像会导致其丢失其他样式并与其邻居失去对齐。

我尝试将它包装在div中，设置各种边距和位置，我无法让它工作。

有什么建议吗？

仅供参考：如果这更容易，我使用<input>代替<button>没问题。

断裂：

固定

代码：

var mybutton = $('#MyButton');

if (mybutton)
{
    mybutton.click(function() {

        // Disable
        mybutton.prop('disabled', true);
        
        // Hide text
        mybutton.html('');
        
        // Set image
        mybutton.css("background", "url('http://lorempixel.com/32/32/') no-repeat 32px center");
        
        // Wait 5 seconds to simulate slow Ajax return
        setTimeout(continueExecution, 3000);
    });
};

function continueExecution()
{
    // Reset button back to normal
    mybutton.html('Check');
    mybutton.css("background", "");
    mybutton.prop('disabled', false);
};

#Label_Guid{
font-size: 20px;
}
#Textbox_Guid{
    width: 200px;
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
}
#MyButton{
    height: 40px;
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="Label_Guid">GUID:</span>
<input id="Textbox_Guid" type="text" name="guid">
<button id="MyButton">Check</button>

Answer 1

您唯一需要做的就是将css添加到按钮中：

vertical-align: middle;

您的问题不是来自背景图片或禁用，而是因为按钮中没有内容。没有内容，默认的垂直对齐方式正在改变其位置。