Datepicker奇怪的位置答案

【问题标题】：Datepicker strange positionDatepicker奇怪的位置
【发布时间】：2016-02-03 02:52:23
【问题描述】：

我的日期选择器离文本框太近了：

我通过使用 F12（在 IE11 上）意识到出了什么问题，这里是定义：

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

我选择编辑 html（仍在调试器上）：

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

结果（这是我想要的），请注意我是通过开发人员工具更改 HTML，而不是在我的源代码中：

所以我想我会为 ui-datepicker-trigger 类实现一些 CSS：

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

但重新加载后，结果还是一样，我按F12查看，发现新添加的CSS已应用于该类。所以我决定在页面加载时使用一些 javascript（我删除了上面的 CSS）：

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

然后我重新加载页面，你猜怎么着，问题仍然存在。使用 F12，我可以看到边框属性已成功添加到 <img> 标记中。这里是它变得奇怪的时候，我在编辑之前选择了Edit as HTML 调试器：

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

修改后：

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

现在datepicker 的位置发生了变化，正如我所愿。

我不明白发生了什么？

【问题讨论】：

jsfiddle.net/arunpjohny/3jxdvmL9/1
@ArunPJohny 谢谢，对不起，我忘了提，我也尝试为.ui-datepicker-trigger img 添加类，但没有奏效。
border="0" 是 img 的 HTML 属性，而不是 css。它在 HTML5 中已弃用。 $('.ui-datepicker-trigger').attr('border','0'); 这增加了 HTML 属性。对于 CSS，它应该是 $('.ui-datepicker-trigger').css('border',0);。或样式表中的类的 CSS。
@pratikwebdev 我也尝试添加 CSS，请阅读我的问题
只用css试试。删除其他脚本代码和影响它的所有其他内容。它应该像 Arun 提供的 JSfiddle 一样工作。其他样式或代码可能会影响它。您提到您首先在调试器上添加了border=0，然后添加了脚本。所以边界是压倒它的。 2 美分

【解决方案1】：

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

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

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

【讨论】：