datepicker的css位置：absolute给出按钮的正确位置但按下时不正确

Question

我是css初学者，如果我提出基本问题，请提前道歉。

我在我的Web应用程序中使用了jquery datepicker，并且在jquery日期按钮的定位方面存在问题。我正在使用一个css框架（yaml），它有一组定义的按钮样式，所以我需要做的是覆盖所有预定义的样式。

当我指定以下样式时......

button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
    border: 0px !important;
    background-color: transparent !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image:none !important;
    border: 0 none !important;
    display: inline !important;
    margin-left: 5px !important; 
    box-shadow: none !important;
    padding: 0 0.5em !important;
}

日期按钮略高，与输入字段不符......

当我解决这个问题并指定以下样式时......

button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
    border: 0px !important;
    background-color: transparent !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image:none !important;
    border: 0 none !important;
    display: inline !important;
    margin-left: 5px !important; 
    box-shadow: none !important;
    padding: 0 0.5em !important;
    position: absolute !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;   
}

日期按钮与我想要的下一个字段一致。

但是在改变按钮的样式以使用绝对（上面的第2个css提取的3个结束行）之后，当我正在进行鼠标按压时，日期控制在屏幕上跳起大约15个像素。

有没有人对我如何解决这个问题有任何想法？关于我的理解发生了什么，这是一个很好的解释。

感谢

Answer 1

您可以使用文本框中的日历图标尝试其他解决方案。

点击此处： - http://jsfiddle.net/33Xxk/

.tInput_datepick {
width: 250px;
color: #555555;
text-decoration: none;
border-radius: 7px;
padding-left: 7px;
background-image: url(http://www.bay.k12.fl.us/portals/18/Images/calendar_icon.jpg);
background-repeat: no-repeat;
background-position: top right;
background-position-y: -5px;
height: 25px !important;
border: 1px solid #888e9c !important;
background-color: #f4f5f9 !important;
cursor: pointer !important;
}