经过大量的搜索和测试,我仍然无法解决这个问题。
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显示不正确?谢谢你们。