html – 当应用于表格单元格时,如何让内联块一致地呈现？

概述我有一个简单的 HTML表格,我想在每个现代浏览器(IE9,最新的FF,Chrome,Safari)中一致地呈现.如果我将宽度和“display：inline-block”应用于表格单元格,FireFox 4和Chrome将允许表格单元格“换行”到第二行,就好像它们只是常规的内联块元素一样.然而,在IE9中,单元格被视为经典表格单元格,并且不保持其宽度并且被压缩成一行. 代码的完整示例如下：htt 我有一个简单的 HTML表格,我想在每个现代浏览器(IE9,最新的FF,Chrome,Safari)中一致地呈现.如果我将宽度和“display：inline-block”应用于表格单元格,firefox 4和Chrome将允许表格单元格“换行”到第二行,就好像它们只是常规的内联块元素一样.然而,在IE9中,单元格被视为经典表格单元格,并且不保持其宽度并且被压缩成一行.

代码的完整示例如下：http://jsbin.com/ujeber/6

是否有一个CSS属性可以应用于table,tr或td元素,以使IE9,Chrome和firefox 4的行为方式相同？如果没有,这些浏览器中的哪一个正确遵循标准,或者在这种情况下标准是否含糊不清？

标记：

<table>  <tr>    <td>Test1</td>    <td>Test2</td>    <td>Test3</td>    <td>Test4</td>  </tr></table>

样式：

td {    wIDth:300px;    display:inline-block;  }  table {    wIDth: 650px;    }

我知道这不是使用table元素的典型/建议方式.我在渲染引擎的预期行为的上下文中询问.我不是在寻找与选择语义上合适的标签相关的答案.

解决方法 我找不到一种方法让IE9通过display显示你想要的结果：inline-block.

除非您的实际用例与您的简化测试用例有所不同,否则您应该只能切换到float：left on td,这确实有效：

http://jsbin.com/ujeber/7

浮动和内联块通常是可以互换的.但是,他们都有不同的优点和缺点.使用浮动,您必须清除/包含它们.使用内联块,您必须处理额外的间隙(通常通过删除HTML中的空格来修复),并且如果没有进一步的技巧,它在ie6 / 7中不起作用.

总结

以上是内存溢出为你收集整理的html – 当应用于表格单元格时,如何让内联块一致地呈现？全部内容，希望文章能够帮你解决html – 当应用于表格单元格时,如何让内联块一致地呈现？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。