0

I am definitely a newbie at CSS and it is causing me all sorts of headaches. I have the following set up for calendar blocks which looks amazing in 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;
                }

The HTML is something like this(generated by 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>

However, in Firefox, these two properties seem to be ignored. 

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

And in IE, my information starts half way down the page. What can I do to get the same result in all 3 browsers?

4

1 回答 1

3

Firefox 可能就在这里，Chrome 是错误的（IE 可能像往常一样坏了）。

TD元素不是块级元素！正如您在HTML 4 的标准 CSS中看到的那样，TD元素属于display: table-cell. CSS 属性overflow仅适用于创建框的元素，这些元素是 和 类型的block元素。盒子的概念与其他元素是陌生的。inline-blocklist-item

您可以通过将元素放入表格单元格中来让 Firefox 隐藏 x-overflow（并为 y-overflow 添加滚动条，如果需要）DIV，因为这些会创建一个框。这在 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>
于 2013-07-26T17:30:32.230 回答