jquery datepicker select元素在firefox和ie中显示不同

时间：2011-06-27 05:08:18

标签： css jquery-plugins datepicker

经过大量的搜索和测试，我仍然无法解决这个问题。

1。症状
 jQuery插件datepicker在firefox中显示不同，即你可以点击FF和IE来查看图片。

你可以看到，在ie浏览器中，选择的月份和年份显示不正确，背景颜色在ff中不同，而在FF中，datepicker似乎更清晰。我不知道为什么。

2。 css代码
您可以在http://keith-wood.name/datepick.html下载的datePicker。我的代码如下，html页面是：

<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>

redmond.datepick.css如下：

    /* 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
}

我想知道css的哪个部分是错的？为什么IE显示不正确？谢谢你们。

0 个答案:

没有答案
相关问题
最新问题