datepicker.ui标题框太大了

Question

我在这个问题上摸不着头脑，我真的不知道要向你展示什么代码，因为我没有任何直接影响这个输入的代码，但是我会把任何我能想到的代码。

我在html表单上有一个文本输入，它使用了jquery datepicker。我已经看到这个在使用中它看起来和工作很好，但由于某种原因我的datepicker顶部栏是太大了。请参阅左侧的正常版本以及右侧显示的程序内容：

HTML：

<input title="The last day the individual received a service" type="text" class="datepicker frm-field" id="last-service-date" name="last-service-date"/>

CSS：

.frm-field {
    display: block;
    background-color: #b6cce2;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1pt solid black;
    font-size: 12pt;
    padding-left: 4pt;
    vertical-align: top;
    width: 100%;
}

div.ui-datepicker{
    font-size: 12px;
}

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

JQuery的：

  $('.datepicker').datepicker({
    autoclose: true
  });

我没有改变任何下载的代码，我只是直接使用它。我为缺乏信息而道歉但老实说我不确定还有什么可能导致这个问题......

感谢您提供的任何帮助！

更新

使用以下css代码，Hackerman提供的框已更改，但未使用该内容：

CSS：

.ui-datepicker .ui-datepicker-header { 
    position: relative; 
    padding: .2em 0; 
    height: 30px !Important; 
}

图：

更新

Hackerman的新CSS代码：

.ui-datepicker-month { 
    display: inline-block !Important; 
    width: 60px !Important; 
}

结果图片

最终答案：

以下是修复它的CSS：

.ui-datepicker .ui-datepicker-header { 
    position: relative; 
    height: 22px !Important; 
}

.ui-datepicker-month { 
    display: inline-block !Important; 
}

.ui-datepicker-year { 
    display: inline-block !Important; 
}

呈现的datepicker图片

感谢!!!!

Answer 1

我正在使用这个小提琴进行测试，以便知道要修改的正确的css类：

http://jsfiddle.net/robertrozas/Fa8Xx/3999/

这样我开始做一些改变，首先是：

.ui-datepicker .ui-datepicker-header { 
  position: relative; 
  padding: .2em 0; 
  height: 30px !Important; 
}

后来：

.ui-datepicker-month { 
  display: inline-block !Important; 
  width: 60px !Important; 
}

  

我认为问题是由于样式表之间的css规则冲突引起的。