我有一个基于表格的页面布局,并且我想用更现代的标记重新构建它,这不是一个选项.布局使用跨越两行的单元格作为右侧的侧边栏,而左上角的单元格包含一个简单的标题,左下方的单元格包含页面的主要内容.左上角的单元格具有固定的高度,并且未指定底部单元格和右侧单元格的高度.我创建了一个简化示例来说明我的问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> .fixed { height: 100px; } table { border: 1px solid #000; } td { border: 1px solid #ddd; vertical-align: top; } tr { border: 1px solid #cfc; } * { padding: 15px; } </style> </head> <body> <table> <tr class="fixed"> <td>left</td><td rowspan="2"><div style="height: 500px;">right</div></td> </tr> <tr class="stretch"> <td>left</td> </tr> <tr class="footer"> <td colspan="2">footer</td> </tr> </table> </body> </html>
我已将右列的高度设置为500px,以模拟高于左侧两列高度的内容.这在现代浏览器中的表现如预期:左上角单元格的高度保持固定,下方单元格拉伸以填充额外空间.但是在IE8中,两个左侧细胞都是垂直拉伸的.我需要顶部单元格来保持其固定高度.如何让IE8仅使用CSS来表示为左上角单元格指定的高度?
编辑:
我没有在右列td上设置高度,而是在右列内的div上设置高度.
解决方法
原文地址:https://www.jb51.cc/html/225782.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。