本文介绍了如何使“display:block”工作在&lt; td&gt;在IE?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 有什么我可以做的使IE显示表单元格作为实际块吗? 给定这种风格: table,tbody,tr,td,div { display:block; border:1px solid#0f0; padding:4px; } 和这个html: < table> < tbody> < tr> < td> R1C1< / td> < td> R1C2< / td> < td> R1C3< / td> < / tr> < / tbody> < / table> < div> < div> < div> < div> R1C1< / div> < div> R1C2< / div> < div> R1C3< / div> < / div> < / div> < / div> 表格与Firefox和Safari / Chrome中的嵌套div完全相同。但是在Internet Explorer(8)中,属性 display:block 没有效果。该表呈现的确切地就像我没有设置该属性。 我的主要问题是细胞不破裂;他们都在一条线上渲染。 ( tbody 和 tr 元素没有任何边框或填充。这对我来说不是问题) 我在搜索时没有找到任何有关问题的信息。兼容性图表 on quirksmode 和其他地方声明IE支持 display:block 自v。5.5。关于表显示问题的任何讨论似乎是在做相反的 - 给非表元素任何 display:table - * 属性。 所以,再一次,有什么我可以做的使IE渲染表单元格作为块? (真正的表真的是一个表, )解决方案我应用了 float:left 到 stuff 。它很有用。 现场演示 最大的问题是 width:100% padding 会使事情过宽。 因此: 现场演示(不含有问题的 padding ) 看起来好一点,但我不知道如何轻松地添加 padding < - 在IE7中(它只是不会覆盖它是一个< table> ),即使你不关心IE7, IE7: $ b b Is there anything I can do to make IE display table cells as actual blocks?Given this style:table,tbody,tr,td,div { display: block; border: 1px solid #0f0; padding: 4px;}And this html:<table> <tbody> <tr> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> </tbody></table><div> <div> <div> <div>R1C1</div> <div>R1C2</div> <div>R1C3</div> </div> </div></div>The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.So once again, is there anything I can do to make IE render table cells as block?(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.) 解决方案 I applied float: left to stuff. It kinda works.Live DemoThe biggest problem is width: 100% combined with the padding is making things too wide.So:Live Demo (without the problematic padding)That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).IE7: 这篇关于如何使“display:block”工作在&lt; td&gt;在IE?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
10-29 13:33