logo标签列表

如何使“display：block”在IE中对<td>起作用？

htmlcssinternet-explorerinternet-explorer-8
38

有没有办法让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元素没有任何边框或填充。这对我目前来说不是问题。）

我在搜索时没有找到关于这个问题的信息。兼容性表（quirksmode）和其他地方的信息表明，IE从版本5.5开始支持display:block。似乎任何有关表格显示问题的讨论都是反过来做-给非表格元素任何display:table-*属性。

那么，我可以做些什么使IE将表格单元格呈现为块状呢？

（真正的表格实际上是一个具有表格数据的表格。我希望保持它的原样，并进行非侵入式的重新样式化。）

2
你到底为什么想要这样做？ - Kyle
我正在将其重新设计为条形图，其中每一行都变成一根水平的条形，宽度取自一个单元格的内容，其余的Td向左对齐。在Firefox，Safari和Chrome中完美运行。 - Daniel
4
我认为你最好忽略我的答案。相反，你应该使用Javascript/jQuery从你的表格数据动态创建一个条形图，就像这个示例和这个示例的结合体。我不认为你会找到一种可靠的方法使<table>按照你想要的方式工作。 - thirtydot
再次感谢。这可能是真的。无论如何，我正在使用jQuery来完成部分转换工作。我选择操作现有的DOM对象，而不是替换它们，因为这样看起来更清晰，而且效果很好——直到我回到办公室的电脑上，遇到了IE浏览器……唉，算了。我想我现在应该知道，在测试所有基本功能之前，永远不要在任何浏览器中完善细节。 - Daniel
4
现实世界用例：Chris Coyier的聪明的响应数据表格技术在IE9中需要进行修改才能正常使用。 - Jordan Gray
不幸的是，旧版IE在处理表格元素的display:block时有所不同。在IE7-中，表格元素默认为display:block（它们只不过不知道display:table-*），但对它们使用了一些“表格布局魔法”。可能IE8并没有完全移除这个遗留问题。 - Ilya Streltsyn
5个回答
39

我给stuff应用了float: left，看起来还算正常。

演示页面

最大的问题是width: 100%和padding结合起来会让东西变得太宽。

所以：
演示页面（没有有问题的padding）

看起来好一点，但如果需要添加padding到每个地方，就不知道要怎么做了。

这在IE7中失败了--> 彻底失败 <-- （它始终无法理解它是一个<table>），而且即使您不关心IE7，在您的用例中也需要进行调整（如果可以使用的话）。

IE7：

enter image description here

在这种情况下，我建议使用设置了display:table（等）属性的div进行切换。 - Marcin
2
@Marcin：您需要仔细阅读问题。OP明确希望保留table标签并重新设计它们：“实际的表格确实是一个带有表格数据的表格。我想保持这种方式，并进行不显眼的重新设计。” - thirtydot
如果您设置显示属性，它将真正作为表格进行操作。我看不出有什么问题。 - Marcin
@Marcin：你说：“我建议切换到divs”- OP说（意思是）：“我有我的<table>，我想让它们像<div>一样行为”。他不想改变<table>的HTML，这就是我在这里要表达的观点。 - thirtydot
1
@Marcin: 我想像在其他浏览器中那样拥有并食用蛋糕。;-) 我知道还有其他选项可以替换我的当前标记，这不是一个巨大的问题，但我希望通过建立在已经存在的标准、非侵入式CSS/JavaScript之上来解决此问题。由于我没有找到任何信息表明IE能否做到这一点，或者是否存在一些奇怪的地方可以使用，所以我希望有更多了解情况的人参与讨论。然后当有人暗示这是不合理的时候，我有点不安。（我添加了最后一段话来避免这种讨论……） - Daniel
显示剩余6条评论
4
以下内容适用于IE6+：
tr { display: block; position: relative }
td.col1 { display: block; left: 0; top: 0; height: 90px; }
td.col2 { display: block; position: absolute; left: 0; top: 30px; }
td.col3 { display: block; position: absolute; left: 0; top: 60px; }
假设：
单元格高度为30px
缺点：
固定单元格高度
繁琐的top属性规范（可以生成）
只有在HTML提供列类时才有效
优点：
适用于所有浏览器。
何时使用：
当您无法控制HTML但可以控制CSS时使用。一些托管的付款解决方案会显示在I​​FRAME中并提供自定义样式表。
3

我刚和我的同事一起弄懂了。

虽然我强烈建议不再支持IE8！因为您正在使用一个不受支持且目前不安全，不符合当前标准和技术的产品。最好告诉您的用户升级，并提供一些浏览器下载链接供他们选择。

话虽如此。以下CSS是您需要在Internet Explorer 8中修复它所需的最小CSS。

table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }
<table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>

“更好的方法是告诉用户升级并给他们一些浏览器下载链接供选择。” — 并非所有用户都能升级，许多人并不关心或理解您的浏览器升级信息。 - Paul D. Waite
是的，我同意。这就是为什么我创建了一个免费的API来方便这个过程。请查看：http://webvakman.nl/api/recentbrowserversions - Marc van Nieuwenhuijzen
@PaulD.Waite 对不起，我误解了您的评论。有些人可能无法理解，但这并不意味着您不应该尝试。作为一名Web开发人员，您有责任，IE8（或任何其他版本）已经终止生命周期，不应再使用。即使微软也不再支持它。 - Marc van Nieuwenhuijzen
是的，我并不是说IE 8是一个好选择。我是说这实际上不是你的责任。当用户访问您的网站时提示他们升级浏览器有点像当您去买香蕉时您的本地果蔬商告诉您换一辆新车。即使他们是正确的，这也不是您去那里的目的，您没有特别的理由相信他们对汽车维护的意见，也许您现在真的没有办法买一辆新车。 - Paul D. Waite
我认为Web开发人员比蔬菜商更接近浏览器，就像蔬菜商告诉你不要把蔬菜放在古埃及储存容器中一样，因为他知道那里不是密封的，蔬菜不会保持新鲜。你知道，因为其他顾客从他们的古希腊容器中拿出了腐烂的蔬菜:D这更像是地铁上的外科医生看到某人有一个非常严重的痣。他最好说出来并指向正确的肿瘤专家。这不是那个人当时期望的，但可能会挽救他的生命... - Marc van Nieuwenhuijzen
我们离外科医生还有很长的路要走，伙计。你想警告也好，但这不太可能有效。 - Paul D. Waite
0

添加这段代码：

<!DOCTYPE html>

关于编程的问题，我的解决方法是，在顶部添加上述声明语句，这样就可以对td元素有效地使用display:block属性。

你需要在代码的顶部添加这段语句。

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在代码的顶部添加这行代码，但使用“float”和“width”非常好。 抱歉，我的英语很差。

很遗憾，您的示例在IE8中显示为表格。您建议的doctype字符串不应该与<!DOCTYPE html>或任何其他切换标准模式的doctype产生任何不同的效果（有关详细信息，请参见https://hsivonen.fi/doctype/）。 - Ilya Streltsyn
0

将其改为display:table-row;而不是display:block 它会按照预期工作

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接