带有 CSS 的填充表在 IE 上不起作用 [英] Padding table with CSS doesn't work on IE

问题描述

这不适用于我的 IE:

但是它适用于 Opera.
有解决方法吗?
解决方案
早期的 CSS 规范(IE6 遵循该规范——我松散地使用了遵循"这个词)并不清楚在表格上定义的填充应该意味着什么.IE6 自然而然地决定通过忽略填充来解释这一点，而不是其他任何浏览器.其他浏览器决定通过在表格边框和最外面的单元格之间添加间距来呈现它，而不影响单元格内​​部或内部单元格之间的间距.到 IE7 出现时，规范已经清除，可以像其他浏览器一样工作，但 IE6 仍然存在问题，它只是忽略了填充.
最好的解决方案是避免在你的桌子上放置内边距，而是用一个 div 包围它，并将内边距放在那里.
<表...>

当然，如果您想要的是单元格间距或单元格填充(而不是仅仅填充表格)，那么您应该使用 cellspacing 或 cellpadding 属性(即使您不想要这些，您至少需要 cellspacing="0" 以避免 IE6 表格呈现的另一个单独问题.

此外，这里的内联样式仅用于演示目的；使用 css 类通常被认为是更好的做法.

This is not working on my IE:

<table style="padding:5px">...</table>

however it works on Opera.

Is there a workaround?

解决方案

The earlier CSS specs (which IE6 follows -- and I use the word "follows" loosely) are not clear about what padding defined on a table should even mean. IE6, naturally, decided to interpret this differently than every other browser, by ignoring the padding. Other browsers decided to render it by adding spacing between the table border and the outermost cells, without affecting the spacing inside cells, or between internal cells. By the time IE7 came out, the specs had cleared up to work like the other browsers, but IE6 still has the problem, where it simply ignores the padding.

The best solution is to avoid putting padding on your table, but instead surrounding it with a div, and putting the padding there.

<div style="padding: 5px;">
    <table...>
    </table>
</div>

Of course, if what you want is cell spacing or cell padding (as opposed to just padding on the table), then you should use the cellspacing or cellpadding attributes (even if you don't want these, you at least need cellspacing="0" to avoid another separate issue with IE6 table rendering).

Also, the inline styles here are for demo purposes; using css classes is generally considered better practice.

这篇关于带有 CSS 的填充表在 IE 上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！