mozilla中span设置宽度width , 画日历时发现

关注

原创最新推荐文章于 2026-07-05 12:50:42 发布 162 阅读 AI 写同款· GEO 优化 ›

span的默认display属性是inline,这样导致了在firefox中无法对span设置宽度属性，需要调整span的display属性为inline-block就好了。这样ie中和firefox中就都能设置display属性了。

<html>
    <head>

    </head>

    <body>
        <script>
            function createCalendar(year , month) {
                //得到这一年的月份有多少天
                var daysCount = getDayCount(year , month);
                //得到1号和最大天数的日期对象
                var dateStart = new Date(year , month - 1 , 1);
                var dateEnd = new Date(year , month - 1 , daysCount);
                //得到天数的开始和结束是星期几
                var weekStart = dateStart.getDay();
                var weekEnd = dateEnd.getDay();
                //得到画出来的日历中空白的天数
                var dayLeft = weekStart + 6 - weekEnd;
                //得到总的天数
                var monthDaysAll = daysCount + dayLeft;
                //得到有几行
                var rows = monthDaysAll / 7;
                //画出标题
                //大的div
                var bigDiv = document.createElement('DIV');
                bigDiv.className = 'calendar';
                //添加title
                var titleDiv = document.createElement('DIV');
                titleDiv.className = 'title';
                /*
                text-align:center;
                border:black 3px double;
                width:350px;
                */
                var textTitle = getMonthName(month);
                titleDiv.appendChild(document.createTextNode(textTitle + ' , ' + year));
                titleDiv.style.textAlign = 'center';
                titleDiv.style.border = 'double 3px black';
                titleDiv.style.width = '350px';
                //添加到大的里面
                bigDiv.appendChild(titleDiv);
                //开始添加第一行
                var count = 0 ;
                var tmpDiv = null;
                for(var i = 0 ; i < monthDaysAll ; i++) {
                    if(i % 7 == 0) {
                        tmpDiv = document.createElement('DIV');
                        tmpDiv.className = 'line';
                        bigDiv.appendChild(tmpDiv);
                    }
                    var span = document.createElement('SPAN');
                    /*
                        width : 50px;
                        border : solid double 3px;
                        margin:0px;
                        padding:0px;
                        text-align:center;
                    */
                    if(i < weekStart) {
                        span.innerHTML = ' ';
                    } else if(i > (weekStart + daysCount - 1)) {
                        span.innerHTML = ' ';
                    } else {
                        span.innerHTML = (i + 1 - weekStart) + '';
                    }

                    span.style.display = 'inline-block';
                    span.style.width = '50px';
                    span.style.border = 'double 3px black';
                    span.style.margin = '0px';
                    span.style.padding = '0px';
                    span.style.textAlign = 'center';
                    tmpDiv.appendChild(span);
                }
                bigDiv.appendChild(document.createElement('BR'));
                document.body.appendChild(bigDiv);
            }
            function getDayCount(year , month) {
                var day = 0;
                switch(month) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        day = 31;
                        break;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        day = 30;
                        break;
                    case 2:
                        if(((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) {
                            day = 29;
                            break;
                        }else {
                            day = 28;
                            break;
                        }
                }
                return day;
            }
            /*
                月份：January一月，February二月，March三月，April四月，May五月，June六月，July七月，August八月，September九月，October十月,Nevember十一月,December十二月．
            */
            function getMonthName(month) {
                switch(month) {
                    case 1:
                        return 'January';
                    case 2:
                        return 'February';
                    case 3:
                        return 'March';
                    case 4:
                        return 'April';
                    case 5:
                        return 'May';
                    case 6:
                        return 'June';
                    case 7:
                        return 'July';
                    case 8:
                        return 'August';
                    case 9:
                        return 'September';
                    case 10:
                        return 'October';
                    case 11:
                        return 'November';
                    case 12:
                        return 'December';
                }
            }

            function drawYear(year) {
                for(var i = 1 ; i <= 12 ; i++) {
                    createCalendar(year , i);
                }
            }
            drawYear(2009);
        </script>
    </body>
</html>