jquery datepicker select elements displays different in firefox and ie - css

Question

After a lot of search and tests, i still can not fix this ui problems.
1. symptom
jQuery plugin datepicker display different in firefox and ie.you could view the pic by clicking FF and IE.
You could see that in ie browser the select month and year displays improperly, background color is different in ff, and in FF the datepicker seems more clearly. I don't know why.
2. css code
The datePicker you could download at http://keith-wood.name/datepick.html. My code is below,html page is:
<style type="text/css">
#import "datePicker/redmond.datepick.css";
</style>
<span id="calendar" class="datepickHideCalendar">
<p>start date</p><p><input type="text" id="popupDatepickerStart"></p>
<p>end date</p><p><input type="text" id="popupDatepickerEnd"></p>
<table align="center"><tr><td><button type="button" id="getDates">run</button></td> </tr></table>
</span>
the redmond.datepick.css is as below:
/* Redmond style sheet for jQuery Datepicker v4.0.5. */
#charset "utf-8";
.datepick {
background-color: #fff;
color: #222;
border: 1px solid #4297d7;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-family: Arial,Helvetica,Sans-serif;
font-size: 70%;
}
.datepick-rtl {
direction: rtl;
}
.datepick-popup {
z-index: 1000;
}
.datepick-disable {
position: absolute;
z-index: 100;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
}
.datepick a {
color: #222;
text-decoration: none;
}
.datepick a.datepick-disabled {
color: #888;
cursor: auto;
}
.datepick button {
margin: 0.25em;
padding: 0.125em 0em;
background-color: #5c9ccc;
color: #fff;
border: none;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
float: left;
width: 100%;
background-color: #fff;
font-size: 90%;
font-weight: bold;
}
.datepick-ctrl {
background-color: #d0e5f5;
}
.datepick-cmd {
width: 30%;
}
.datepick-cmd:hover {
background-color: #dfeffc;
}
button.datepick-cmd:hover {
background-color: #79b7e7;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
width: 8%;
}
a.datepick-cmd {
height: 1.5em;
}
button.datepick-cmd {
text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
float: left;
padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
float: left;
width: 35%;
text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
float: right;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-prev, .datepick-rtl .datepick-cmd-prevJump,
.datepick-rtl .datepick-cmd-clear {
float: right;
padding-left: 0%;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-current, .datepick-rtl .datepick-cmd-today {
float: right;
}
.datepick-rtl .datepick-cmd-next, .datepick-rtl .datepick-cmd-nextJump,
.datepick-rtl .datepick-cmd-close {
float: left;
padding-left: 2%;
padding-right: 0%;
text-align: left;
}
.datepick-month-nav {
float: left;
text-align: center;
}
.datepick-month-nav div {
float: left;
width: 12.5%;
margin: 1%;
padding: 1%;
}
.datepick-month-nav span {
color: #888;
}
.datepick-month-row {
clear: left;
}
.datepick-month {
float: left;
width: 15em;
border: 1px solid #5c9ccc;
text-align: center;
font-size: 90%;
}
.datepick-month-header, .datepick-month-header select, .datepick-month-header input {
height: 1.7em;
background-color: #5c9ccc;
color: #fff;
font-weight: bold;
}
.datepick-month-header select, .datepick-month-header input {
height: 1.7em;
border: none;
}
.datepick-month-header input {
position: absolute;
display: none;
}
.datepick-month table {
width: 100%;
border-collapse: collapse;
}
.datepick-month thead {
border-bottom: 1px solid #aaa;
}
.datepick-month th, .datepick-month td {
margin: 0em;
padding: 0em;
font-weight: normal;
text-align: center;
}
.datepick-month th {
border: 1px solid #fff;
border-bottom: 1px solid #c5dbec;
}
.datepick-month td {
border: 1px solid #c5dbec;
}
.datepick-month td.datepick-week * {
background-color: #d0e5f5;
color: #222;
border: none;
}
.datepick-month a {
display: block;
width: 100%;
padding: 0.125em 0em;
background-color: #dfeffc;
color: #000;
text-decoration: none;
}
.datepick-month span {
display: block;
width: 100%;
padding: 0.125em 0em;
}
.datepick-month td span {
color: #888;
}
.datepick-month td .datepick-other-month {
background-color: #fff;
}
.datepick-month td .datepick-today {
background-color: #fad42e;
}
.datepick-month td .datepick-highlight {
background-color: #79b7e7;
}
.datepick-month td .datepick-selected {
background-color: #4297d7;
color: #fff;
}
.datepick-status {
clear: both;
text-align: center;
}
.datepick-clear-fix {
clear: both;
}
.datepick-cover {
display: none;
display/**/: block;
position: absolute;
z-index: -1;
filter: mask();
top: -1px;
left: -1px;
width: 100px;
height: 100px;
}
.datepickShowCalendar{visibility:visible}
.datepickHideCalendar{visibility:hidden}
.datePickerTitle{text-align:center;font-size:14px;font-weight:bold}
.datePickerBtn{font-size:12px}
/* CSS Document */
BODY {
background-color:#FAFAFA;
}
#calendar{font-size:12px;text-align:center}
TABLE {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
TD {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana";
}
P {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana";
color: #003B7F;
}
SELECT {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
INPUT {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
TEXTAREA {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
DIV {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
TABLE {
WORD-BREAK: break-all;
BORDER-COLLAPSE: collapse;
text-align: center;
}
UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
FORM {
margin:0px;
LIST-STYLE-TYPE: none
}
FORM {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
SELECT {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
A IMG {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px
}
A:link {
color:#000066;
TEXT-DECORATION: none
}
A:visited {
TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: none
}
INPUT {
MARGIN-RIGHT: 5px;
margin-top: 3px;
}
TEXTAREA {
VERTICAL-ALIGN: middle;
MARGIN-RIGHT: 5px
}
SELECT {
VERTICAL-ALIGN:middle;
MARGIN-RIGHT: 5px;
opacity: 1;
}
TEXTAREA {
BORDER: #999999 1px solid;
PADDING-LEFT: 3px;
OVERFLOW: auto;
COLOR: #000;
BACKGROUND-COLOR: #fff
}
.datalist_table{
width:100%;
border:0px;
}
.datalist_table Th {
FONT-WEIGHT: bold;
COLOR: #034579;
HEIGHT: 26px;
text-align:left;
vertical-align:middle;
background:#F0F0F0;
}
.datalist_table TD {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
HEIGHT: 26px;
TEXT-ALIGN: center;
color: #003b7f;
}.datalist_table TD {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
HEIGHT: 26px;
TEXT-ALIGN: center;
color: #003b7f;
}
.list01 {
background:#E4EEF3;
}
.list02 {
background:#D6E4EB
}
i want to know which part of the css is wrong? Why IE displays improperly? Thank you guys.