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

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

css

为什么我的日历的css在IE和Firefox中显示错误？,css,Css,我绝对是CSS的新手，这让我头痛不已。我为日历块设置了以下功能，这些功能在Chrome中看起来非常棒： overflow-x: hidden; overflow-y: auto; /*日历*/ table.calendar{左边框：1px实心#999；} tr.calendar-row{} td.calendar-day{min height:200px；font size:8px；position:relative；}*html div.calendar-day{height

我绝对是CSS的新手，这让我头痛不已。我为日历块设置了以下功能，这些功能在Chrome中看起来非常棒：

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

/*日历*/
table.calendar{左边框：1px实心#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{背景：E8EDFF；最小高度：200px；}*html div.calendar-day-np{高度：200px；}
td.calendar-day-head{背景：#E8EDFF；字体大小：粗体；文本对齐：居中；
宽度：120px；填充：5px；边框底部：1px实心#999；边框顶部：1px实心#999；边框右侧：1px实心#999；}
div.day-number{
背景#0099FF；
位置：绝对位置；
z指数：2；
顶部：-0px；
右：-25px；
填充物：5px；
颜色：#fff；
字体大小：粗体；
宽度：20px；
文本对齐：居中；
边框底部：1px实心#999；
左边框：1px实心#999；
}
td.calendar-day，td.calendar-day-np{
宽度：150px；
最大宽度：150px；
最大高度：75px；
空白：nowrap；
溢出x：隐藏；
溢出y：自动；
顶部：0px；
填充：0px 25px 5px 5px；
边框底部：1px实心#999；
右边框：1px实心#999；
}
.ui对话框标题栏{显示：无；}
td.calendar-day div.event，td.calendar-day-np div{
溢出x：隐藏；
溢出y：自动；
宽度：200px；
最大宽度：200px；
最大高度：75px；
空白：nowrap；
}

HTML是这样的（由php生成）：

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

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

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

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

TD

元素不是块级元素！正如您在中所看到的，

TD

元素的类型为

display:table cell

。CSS属性

溢出

仅适用于创建框的元素，即
块
、
内联块
和
列表项
类型的元素。盒子的概念与其他元素不同

overflow-x: hidden; overflow-y: auto;
通过将
DIV
元素放入表格单元格，可以让Firefox隐藏x-overflow（如果需要，还可以为y-overflow添加一个滚动条），因为这些元素将创建一个框。这应该在Chrome中仍然有效（但我不知道它在IE中的作用）

overflow-x: hidden; overflow-y: auto;
下面是一个例子：

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

<!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>

试验 td.calendar-day，td.calendar-day-np{ 宽度：150px；最大宽度：150px；最大高度：75px；顶部：0px；填充：0px 25px 5px 5px；边框底部：1px实心#999；右边框：1px实心#999； } td.calendar-day div，td.calendar-day-np div{ 溢出x：隐藏；溢出y：自动；宽度：150px；最大宽度：150px；最大高度：75px；空白：nowrap； } 测试1 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 测试3 测试4测试4测试4测试4测试4测试4测试4 测试5 测试6
Firefox可能就在这里，Chrome是错误的（IE可能像往常一样坏了）

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

TD
元素不是块级元素！正如您在中所看到的，
TD
元素的类型为
display:table cell
。CSS属性
溢出
仅适用于创建框的元素，即
块
、
内联块
和
列表项
类型的元素。盒子的概念与其他元素不同

overflow-x: hidden; overflow-y: auto;
通过将
DIV
元素放入表格单元格，可以让Firefox隐藏x-overflow（如果需要，还可以为y-overflow添加一个滚动条），因为这些元素将创建一个框。这应该在Chrome中仍然有效（但我不知道它在IE中的作用）

overflow-x: hidden; overflow-y: auto;
下面是一个例子：

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

<!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>

试验 td.calendar-day，td.calendar-day-np{ 宽度：150px；最大宽度：150px；最大高度：75px；顶部：0px；填充：0px 25px 5px 5px；边框底部：1px实心#999；右边框：1px实心#999； } td.calendar-day div，td.calendar-day-np div{ 溢出x：隐藏；溢出y：自动；宽度：150px；最大宽度：150px；最大高度：75px；空白：nowrap； } 测试1 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 测试3 测试4测试4测试4测试4测试4测试4测试4 测试5 测试6
HTML是什么样子的？是否有其他相关CSS，如
或
标签上的CSS？请发布更多代码。属性，如
top:0px在没有更多代码的更有意义的上下文的情况下看起来任意和随机。Hungerstar和Izkata，我需要额外的代码。希望我能解决这个问题。谢谢你的帮助。HTML是什么样子的？是否有其他相关CSS，如或标签上的CSS？请发布更多代码。属性，如top:0px随意查看并运行