Datepicker strange position

Question

My datepicker is too close to the textbox :

I realized what is the problem by using F12 (on IE11), here is the definition :

<img title="" class="ui-datepicker-trigger" alt="" src="calendar.gif">

I chose to edit the html (still on the debugger) :

<img title="" class="ui-datepicker-trigger" alt="" src="calendar.gif" border="0">

The result (this is what I WANT), please note that I'm changing the HTML by the developer tool, not in my source code :

So I thought I would implement some css for the ui-datepicker-trigger class :

.ui-datepicker-trigger{
    border : 0 !important
}

But after reloading, the result remains the same, I check by F12 and see that the newly added CSS was applied for the class. So I decide to use some javascript at page load (I removed the CSS above) :

<script>
    $('.ui-datepicker-trigger').attr('border','0');
</script>

Then I reload the page, and guess what, the problem persists. Using F12, I can see the border attribute was successfully added to the <img> tag. And here is when it's getting weird, I chose to Edit as HTML by the debugger, before edit :

<img title="" class="ui-datepicker-trigger" alt="" src="calendar.gif"` border="0">

After edit :

<img title="" class="ui-datepicker-trigger" alt="" src="calendar.gif">

And now the datepicker's posistion changes, as I desire.

I can't understand what's going on?

Answer 1

我认为当你在IE工具中添加border="0"并看到你想要的结果时，不幸的是它导致了一个错误的假设。默认情况下，图像没有边框，因此设置此值将没有任何区别。也许你编辑时发生的事情是dev工具在input和img元素之间插入了一个空格字符，从而产生了一个空白。

为了在两个元素之间创建更多空间，请在css中设置margin属性：

.ui-datepicker-trigger{
    margin-left: 3px;
}