-1

これはHTMLです

<table class = "contact-table">
  <tr>
      <th>First Name(*):</th>
      <td>
          <asp:Label ID="lblFirstName" runat="server" ></asp:Label>
      </td>
  </tr>
  <tr>
      <th>Middle Name</th>
      <td>
          <asp:Label ID="lblMiddleName" runat="server" ></asp:Label>
      </td>
  </tr>
  <tr>
      <th>Last Name(*):</th>
      <td>
         <asp:Label ID="lblLastName" runat="server" ></asp:Label>
      </td>
  </tr>
</table>

そして、これはcssです

.contact-table th,
.contact-table td
{
   border: 1px Black solid;      
}

FFとChromeの場合、物事は完璧に機能しています。つまり、thとtdには 1px の黒い境界線があります。ただし、IE の場合、内容のある td のみボーダーがあります。

その理由は？

編集

この.contact-table td spanを追加すると

.contact-table th,
.contact-table td,
.contact-table td span 
{
   border: 1px Black solid;      
}

空のセルには IE の境界線がありますが、以前に境界線があったセルには、セル内に余分な境界線があります。

編集

このようにルールを変更すると

.contact-table th,
.contact-table td span 
{
   border: 1px Black solid;      
}

.contact-table td span 
{
   width: 100%;      
}

IE では完全に機能しますが、FF と Chrome では、テキストのみを囲む小さな境界線が表示されるようになりました。

ブラウザに応じて異なるルールを適用するように css に指示する方法はありますか?

4

1 に答える 1

1

セットはありますempty-cells: showか？

参照: http://msdn.microsoft.com/de-de/library/ie/cc848860(v=vs.85).aspx

于 2013-02-18T16:22:09.750 に答える