如何使“display：block”工作在< td>在IE？ [英] How can I make "display: block" work on a <td> in 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 Demo

The 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！