Странная проблема с границами CSS в Chrome - PullRequest
Новая
       17

Странная проблема с границами CSS в Chrome

2 голосов
/ 27 декабря 2011

Я написал заявление, из которого вы можете писать чеки, и у меня есть следующая разметка на одной из страниц для просмотра и редактирования некоторых полей чека. 

#CheckInformation {
  border: 1px solid #aaa;
  padding: 10px;
  background-color: #E2F0F9;
  margin-top: 15px;
}
#CheckInformation #PropertyAddress {
  font-size: .87em;
  width: 200px;
  float: left;
  text-align: center;
}
#CheckInformation .label-column {
  width: 100px;
}
#CheckInformation .payto-col {
  width: 570px;
}
#CheckInformation .line {
  border-bottom: 1px solid #aaa;
}
#CheckInformation #PayTo {
  width: 540px;
}
#CheckInformation #Address {
  width: 200px;
  height: 45px;
}
#CheckInformation #Memo {
  width: 400px;
}
#CheckInformation #NumberWords {
  margin: 3px;
  font-style: italic;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />
<div id="CheckInformation">
  <table>
    <tr>
      <td class="top" colspan="2" rowspan="2">
        <div id="PropertyAddress">
          1234 Main St
          <br />Some city, State 50000
        </div>
      </td>
      <td class="text-right label-column">Date</td>
      <td>
        <input type="text"></input>
      </td>
    </tr>
    <tr>
      <td class="text-right">Check Number</td>
      <td>
        <input type="text"></input>
      </td>
    </tr>
    <tr>
      <td>Pay to</td>
      <td class="payto-col line">
        Some person
      </td>
      <td class="text-right">Amount</td>
      <td class="text-right line">
        70.00
      </td>
    </tr>
    <tr>
      <td></td>
      <td class="line" colspan="3">
        <div id="NumberWords">Zero Dollars & Zero Cents</div>
      </td>
    </tr>
    <tr>
      <td class="top">Address</td>
      <td colspan="3">
        <div id="Address">
          1234 Main St
          <br />Some city, State 50000
        </div>
      </td>
    </tr>
    <tr>
      <td>Memo</td>
      <td colspan="3">
        <input type="text"></input>
      </td>
    </tr>
  </table>
</div>

Предполагается, что на tds должна быть нижняя граница, показывающая, кому был записан чек, и сумму, но не на ярлыках этих ячеек.Он действительно отображается правильно в IE и FireFox, но в Chrome я также получаю нижнюю границу под меткой Amount.

Запуск IE 9, FireFox 6.0.2 и Chrome 16.0.912.63

Кто-нибудь еще видит проблему?

1 Ответ

5 голосов
/ 27 декабря 2011

Добавление table{border-collapse:separate}, кажется, это исправить, но я не знаю почему. Я обновлю ответ, если узнаю больше.

...