【问题标题】:Padding does not work in iE?填充在 iE 中不起作用?
【发布时间】:2011-04-06 17:37:50
【问题描述】:

我想在元素的边框内的内容周围留出空间。

http://www.w3schools.com/CSS/css_padding.asp

我使用了 cellpadding,它在 FF 中运行良好,但在 IE 中却不行。我使用的IE版本是7.0.5730.13

我试过一个简单的表格

<table style="padding:100px" border="1">
    <tr><td>123</td></tr>
    <tr><td>456</td></tr>
    <tr><td>678</td></tr>
    <tr><td>kuz</td></tr>
</table>

但是输出根本没有空间。如果我在&lt;td&gt;. 使用填充标签,它工作得很好。 由于填充在 IE 中不起作用。我使用了另一种方法。

我创建了两个虚拟行;一个在顶部,另一个在底部,一个虚拟列在右侧,另一个在左侧,我用填充来设置它们的样式。这是工作。请让我知道是否有更好的方法在内容周围留出空间。

【问题讨论】:

标签: html css internet-explorer


【解决方案1】:

IE 不支持对表格进行填充。我猜你想这样做是为了在表格边缘和内容之间留出一个空间。

但是,您可以通过将表格放在 div 中来获得相同的结果(这是跨浏览器)。

<div style="padding:100px; border: solid black 1px">
  <table border="1" style="border: solid transparent 0px; width:100%">
        <tr><td>123</td></tr>
        <tr><td>456</td></tr>
        <tr><td> 678</td></tr>
        <tr><td>kzuk</td></tr>
    </table>
</div>

div 将模仿表格的外边框。

编辑: 这仅在您的表格宽度为 100% 时才有效。但是,您可以限制 div 的宽度,但您必须知道您希望它有多宽。

<div style="padding:100px; border: solid black 1px; width:300px">
  <table border="1" style="border: solid transparent 0px; width:100%">
        <tr><td>123</td></tr>
        <tr><td>456</td></tr>
        <tr><td> 678</td></tr>
        <tr><td>kzuk</td></tr>
    </table>
</div>

【讨论】:

  • 感谢您的回复..我试过这种方式,但我无法控制表格右侧的填充。
    我也这样改过。但是表格右侧的空间超过100px
  • 对不起,我以某种方式期望您想要一个全宽表格... div 将占据父级的完整宽度,所以这种方法只有在您的表格也有 100 时才有效% 宽度。
  • 无需抱歉:) 感谢您的回复和花费的时间。
【解决方案2】:

http://www.w3schools.com/CSS/css_table.asp
表格填充仅通过单元格 (td) 实现

【讨论】:

    【解决方案3】:

    检查您的 ie 没有在 quirks 模式下运行,确认您将这些行放在 html 之上:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    

    它们会阻止 ie 加载怪癖模式

    请记住,如果您对表格应用填充,例如

    <table style="padding: 100px">
    

    这会在表格和它的内容之间留下一个空格,如果你想在单元格和它们的内容之间留出空间,就像vikrash说的那样,或者你可以使用cellpadding

    【讨论】:

    • 我试过这个并在 ie 8 中工作!,不知道 7,但我认为它应该
    • 我想在表格和它的内容之间有一个空格。所以我需要在表格级别进行填充。我已将您指定的行放在 html 的顶部,但它在 IE 7 中没有提供任何空间。
    【解决方案4】:

    你应该使用这样的东西:

    <td style="padding: 10px">
    

    CSS 样式 'Padding' 应该应用于 td 而不是 table。

    【讨论】:

      【解决方案5】:

      用margin代替padding怎么样

      margin: 5px 0 0 5px;
      

      【讨论】:

        猜你喜欢
        相关资源
        最近更新 更多
        热门标签