css - 为什么我的日历的 CSS 在 IE 和 Firefox 中显示错误？

Question

我绝对是 CSS 的新手，它让我头疼不已。我为日历 block 设置了以下内容，这在 Chrome 中看起来很棒:

    /* calendar */
    table.calendar      { border-left:1px solid #999; }
    tr.calendar-row {  }
    td.calendar-day { min-height:200px; font-size:8px; position:relative; } * html div.calendar-        day { height:200px; }

    td.calendar-day-np  { background:#E8EDFF; min-height:200px; } * html div.calendar-day-np { height:200px; }
    td.calendar-day-head { background:#E8EDFF; font-weight:bold; text-align:center; 
            width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
    div.day-number   { 
        background:#0099FF; 
        position:absolute; 
        z-index:2; 
        top:-0px; 
        right:-25px; 
        padding:5px; 
        color:#fff; 
        font-weight:bold; 
        width:20px; 
        text-align:center;
        border-bottom:1px solid #999; 
        border-left:1px solid #999; 
    }
    td.calendar-day, td.calendar-day-np { 
        width:150px; 
        max-width:150px;
        max-height:75px;
        white-space:nowrap;
        overflow-x: hidden;
        overflow-y: auto;
        top:0px; 
        padding:0px 25px 5px 5px; 
        border-bottom:1px solid #999; 
        border-right:1px solid #999; 
    }
    .ui-dialog-titlebar {display:none;}
                td.calendar-day div.event,  td.calendar-day-np div {
                    overflow-x:hidden;
                    overflow-y:auto;
                    width:200px;
                    max-width:200px;
                    max-height:75px;
                    white-space:nowrap;
                }

HTML 是这样的(由 php 生成):

    <tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">7</div><p>&nbsp;</p><p>&nbsp;</p></div></td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">8</div><div class="event">14:00-PCR Taylorsville / Rehab</div><div class="event">17:00-PCR Taylorsville / Rehab</div></div></td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">9</div><div class="event">13:00-PCR Taylorsville / Rehab</div><div class="event">14:00-PCR Taylorsville / Audiology</div><div class="event">15:00-PCR Taylorsville / Rehab</div><div class="event">15:30-PCR Taylorsville / Rehab</div><div class="event">16:15-Taylorsville Dermatology</div></div></td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">10</div><div class="event">08:30-Redwood Clinic GI</div><div class="event">10:00-U of U Hospital HTSHTS</div><div class="event">13:00-PCR Taylorsville / Rehab</div><div class="event">15:20-PCR Taylorsville / Audiology</div><div class="event">16:00-PCR Taylorsville / Rehab</div><div class="event">18:20-Taylorsville Clinic, Instacare </div><div class="event">20:20-Taylorsville Clinic, Instacare </div></div></td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">11</div><div class="event">13:30-Taylorsville Clinic, Instacare </div><div class="event">17:30-Taylorsville PT Adult</div></div></td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">12</div><div class="event">09:45-Intermountain Heart Institute IMC</div><div class="event">13:00-PCR Taylorsville / Rehab</div><div class="event">15:00-PCR Taylorsville / Audiology</div><div class="event">16:30-PCR Taylorsville / Rehab</div><div class="event">17:30-Taylorsville Clinic Instacare</div><div class="event">18:50-Taylorsville Clinic Instacare</div></div>        </td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">13</div><p>&nbsp;</p><p>&nbsp;</p></div></td>

然而，在 Firefox 中，这两个属性似乎被忽略了。

    overflow-x: hidden;
    overflow-y: auto;

在 IE 中，我的信息从页面的一半开始。我该怎么做才能在所有 3 种浏览器中获得相同的结果？

Answer 1

Firefox 可能就在这里，Chrome 错了(和往常一样，IE 可能坏了)。

TD元素不是 block 级元素!正如您在 Standard CSS for HTML 4 中看到的那样, TD元素的类型为 display: table-cell . CSS 属性 overflow仅适用于创建框的元素，这些是 block 类型的元素, inline-block和 list-item .盒子的概念与其他元素不同。

您可以通过放置 DIV 来让 Firefox 隐藏 x-overflow(并在需要时为 y-overflow 添加滚动条)元素到您的表格单元格中，因为这些将创建一个框。这在 Chrome 中应该仍然有效(但我不知道它在 IE 中的作用)。

这是一个例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            td.calendar-day, td.calendar-day-np {
                width:150px;
                max-width:150px;
                max-height:75px;
                top:0px;
                padding:0px 25px 5px 5px;
                border-bottom:1px solid #999;
                border-right:1px solid #999;
            }
            td.calendar-day div,  td.calendar-day-np div {
                overflow-x:hidden;
                overflow-y:auto;
                width:150px;
                max-width:150px;
                max-height:75px;
                white-space:nowrap;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td class="calendar-day"><div>Test1</div></td>
                <td class="calendar-day"><div>Test2 Test2 Test2 Test2 Test2<br>Test2<br>Test2<br>Test2<br>Test2</div></td>
                <td class="calendar-day"><div>Test3</div></td>
            </tr>
            <tr>
                <td class="calendar-day"><div>Test4 Test4 Test4 Test4 Test4</div></td>
                <td class="calendar-day"><div>Test5</div></td>
                <td class="calendar-day"><div>Test6</div></td>
            </tr>
        </table>
    </body>
</html>