随笔- 1 文章- 0 评论- 0

2008年6月16日

做日历控件中的两个小问题

帮人做的日历控件,在IE里调试正常,不想在火狐狸却完全变了样子.

这里是HTML和CSS代码

<div id="Calender">
2

<span class="year" id="year">2008</span>
3

<span class="direction" onclick="up()" id="up"><a href="#">◄</a></span>
4

<span id="month">一月</span>
5

<span class="direction" onclick="down()" id="down"><a href="#">►</a></span>
6

<h1>七</h1><h1>一</h1><h1>二</h1><h1>三</h1><h1>四</h1><h1>五</h1><h1>六</h1>
8

<div id="days">
10

</div>
11

</div>

#Calender {width:151px; height:auto; border:solid #3399CC 1px; font-size:small; padding:2px;}

#Calender .year{width:46px; height:1em; color:#666666; padding-left:10px;}

#Calender .direction{color:#FF6600; width:15px;}

#Calender .direction a{color:#FF6600; text-decoration:none;}

#Calender .direction:hover,#Calender .Fdirection:hover{cursor:pointer;}

#Calender .Fdirection{color:#999999;color:#FF6600; width:15px;}

#Calender span{float:left; display:block; height:1em; width}

#Calender h1{font-weight:100; margin:0; float:left; width:21px; height:1em; text-align:center; color:#009900; font-size:small;}

#Calender #month{width:65px; text-align:center; color:#FF6600;}

#Calender #days{width:100%;}

#Calender #days span{display:block; width:21px; text-align:center; height:1.3em; color:#999999;}

#Calender #days a{display:block; width:18px; margin-left:1px; background-color:#BADAE2;border: solid 1px #CCCCCC; text-decoration:none;}/*活跃的样式*/

#Calender #days .pass{color:#999999; background-color:#FFFFFF;}/*过去的事件的样式*/

#Calender #days .tday{color:red;}/*今天的样式*/

      首先应该在外层的Calender高度不对,另月份调整的按钮在火狐中无效.经测试是按钮的单击事件没有执行.
      原以为是代码的问题,但在IE中能顺利运行,没有错误,在火狐里也没有错误提示.于是从新写了一个网页,仅添加一个超链接和简单的JS函数,附到单击事件上,结果执行了.把这个函数拷到原页面里,在把函数附到月份调整按钮上,照样执行不误.观察发现没有什么不一样的.应该都能执行.只有函数名不一样.发现函数名和如果和哪个元素的ID一样的话在火狐里这个函数就会失效,然后提示"id is not a function"郁闷.咋才发现呢!把函数名一改就好了.
      另一个问题是控件最面的层的高度问题,在IE里height不设置都可以,但是在火狐狸怎么设置都不行.最后意外发现把overflow设置成hidden就好了.可能对CSS理解不够,想了半天,还是不能理解为啥就好了. 谁能解答一下