html – IE8拉伸表格单元格高度
发布时间:2020-12-14 18:37:22 所属栏目:资源 来源:网络整理
导读:我有一个基于表格的页面布局,并且我想用更现代的标记重新构建它,这不是一个选项.布局使用跨越两行的单元格作为右侧的侧边栏,而左上角的单元格包含一个简单的标题,左下方的单元格包含页面的主要内容.左上角的单元格具有固定的高度,并且未指定底部单元格和右侧
我有一个基于表格的页面布局,并且我想用更现代的标记重新构建它,这不是一个选项.布局使用跨越两行的单元格作为右侧的侧边栏,而左上角的单元格包含一个简单的标题,左下方的单元格包含页面的主要内容.左上角的单元格具有固定的高度,并且未指定底部单元格和右侧单元格的高度.我创建了一个简化示例来说明我的问题:
<!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来表示为左上角单元格指定的高度? 编辑: 解决方法
我认为Jeroen是正确的,没有纯CSS解决方案来解决这个问题.任何时候在设置了rowspan的表中都有单元格,IE将忽略在这些行上设置的任何显式高度.解决方案是永远不要使用rowspan.在我的情况下,我能够通过在第二行中放置跨越两行的内容,将第一行中的单元格留空,并使用负边距将内容的开头移动到第一行来绕过问题.我希望这对其他人有帮助.如果有人确实有一个纯CSS解决方案,我会接受这个答案.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touche
- 详解微信小程序开发—你期待的分享功能来了,微信小程序序新
- 微信小程序有旋转动画效果的音乐组件实例代码
- 将geom_text放在geom_col堆积条形图中每个条形段的中间位置
- 如何在一个视图中处理两个表单?
- domain-name-system – IIS是否有SRV _SERVICE记录?
- 如何在body标签之后但在body标签内动态放置html? jQuery的
- 微信小程序商城开发之实现用户收货地址管理页面的代码
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- jquery.ajax的url中传递中文乱码问题的解决方法