Question

我绝对是CSS的新手，它引起了各种各样的麻烦。我有以下日历块设置，在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元素不是块级元素！正如您在Standard CSS for HTML 4中看到的那样，TD元素的类型为display: table-cell。 CSS属性overflow仅适用于创建框的元素，这些元素属于block，inline-block和list-item类型的元素。盒子的概念与其他元素不同。

您可以通过将DIV元素放入表格单元格来让Firefox隐藏x溢出（并为y溢出添加滚动条，如果需要），因为这些将创建一个框。这应该仍然适用于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>

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

1 个答案: