代码之家  ›  专栏  ›  技术社区  ›  panchicore

CSS边框下IExplorer

  •  1
  • panchicore  · 技术社区  · 17 年前

    CSS:

    .item_fact{
         border-bottom:#CCCCCC 1px solid;
    }
    

    HTML:

    <table>
      <tr class="item_fact">
        <td> hello </td>
        <td> world </td>
      </tr>
    </table>
    

    IE7不显示边框底部,但Firefox和Chrome显示! 我怎么能破解这个CSS?

    2 回复  |  直到 9 年前
        1
  •  4
  •   Matt    17 年前

    正确的CSS语法是:

    边框底部:尺寸样式颜色;

    因此,在您的案例中:

    边框底部:1px实心CCCCC;

    编辑 :实际上,看起来tr的行为不像是“包含”IE7中的td元素。您可以做的一个技巧是让表折叠边框,然后将.item下的所有TDS应用到边框底部。

    这样地:

    <html>
    <head>
    <style type="text/css">
    table {
        border-collapse: collapse;
    }
    .item_fact td {
         border-bottom:1px solid #CCCCCC;
    }
    </style>
    </head>
    <body>
    <table>
      <tr class="item_fact">
        <td> hello </td>
        <td> world </td>
      </tr>
    </table>
    </body>
    </html>
    
        2
  •  0
  •   cdm9002    17 年前

    IE/CSS不支持行边框。你需要给这些单元格加边框。

    .item_fact td {
      border-bottom:1px solid #ccc;
    }