我正在使用dynarch日历小部件。问题是,它在Chrome中工作得很好而在Firefox中它是一个完全凌乱的结构,在Firefox的标题部分显示了一个奇怪的高度空间,在左侧显示一些垂直对齐的隐藏按钮。我尝试了很多工作,但这一切都是徒劳的。有人有时间研究我的CSS有什么问题。
附加链接以获得更好的洞察力。
.calendar {
position: absolute;
display: none;
border: 1px solid #A8AFC0;
font-size: 11px;
border-radius: 4px;
color: #000;
cursor: default;
background: white;
font-family: verdana, sans-serif;
z-index: 999999;
}
.calendar table thead tr th,
.calendar table thead tr td {
font-weight: bold;
color: #222222;
}
.calendar table {
border-top: 1px solid #FFF;
width:238px;
height: 250px;
font-size: 11px;
color: #000;
cursor: default;
background: #FFFFFF;
font-family: verdana;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar table tr:nth-of-type(odd){
background:#fff !important;
}
.calendar table tr:nth-of-type(even){
background:#fff !important;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 2px;
background: beige;
color: #000;
border-top:1px solid #ccc;
text-align: center;
font-family: sans-serif;
font-size: 13px;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
background: white !important;border-bottom: 1px solid #ccc;
}
.calendar thead .daynames { /* Row <TR> containing the day names */
}
.calendar .button {
background: beige;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left:0;
border-right:0;
border-radius: 0;
color: #333;
cursor: pointer;
display: inline;
padding: 6px 6px 4px;
font-size: 12px;
}
.calendar .button:hover {
background: #dadada;
border:0;
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid #dadada;
text-align: center;
font-weight: normal;
background: #FFFFFF;
color: black;
font-family: verdana, sans-serif;
font-size: 12px;
}