html - Firefox "bleeding"在 tr 上出现边界 - 错误？

Question

我在表格中有一个表单，如果出现错误，我会在出错的行周围放置一个红色边框，方法是在该行的 tr 元素上指定一个边框。

这在 Chrome 中工作得很好。但是，在 Firefox(4 和 5)中，我在显示中看到了各种故障。值得注意的是，在一个案例中，我的边框在下一行的两侧“渗出”。

编辑:另一个问题是，当我上下滚动时，边框向下的延伸会发生不可预测的变化。

现场版在这里:http://testing.tustincommercial.com/incorporate/ (要触发错误，只需滚动到底部，然后使用“下一步”按钮提交表单)。

HTML:

<tr class="registered_office_row error" id="registered_office_row">
   <th><span id="for-id_registered_office-">Registered office address:</span><div class="errorlist"><div class="erroritem">This field is required.</div></div></th>
   <td><textarea name="registered_office" cols="40" rows="10" id="id_registered_office"></textarea></td></tr>
<tr class="registration_country_row  registration_country_row" id="registration_country_row">
   <th><span id="for-id_registration_country_0-">Registration country:</span></th>
   <td><label for="id_registration_country_0" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" aria-pressed="true" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>England and Wales</td></tr></tbody></table></span></label><input type="radio" name="registration_country" value="EW" id="id_registration_country_0" checked="checked" class="ui-helper-hidden-accessible">
      <label for="id_registration_country_1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Wales</td></tr></tbody></table></span></label><input type="radio" name="registration_country" value="CY" id="id_registration_country_1" class="ui-helper-hidden-accessible">
      <label for="id_registration_country_2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Scotland</td></tr></tbody></table></span></label><input type="radio" name="registration_country" value="SC" id="id_registration_country_2" class="ui-helper-hidden-accessible">
      <label for="id_registration_country_3" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Northern Ireland</td></tr></tbody></table></span></label><input type="radio" name="registration_country" value="NI" id="id_registration_country_3" class="ui-helper-hidden-accessible">
</td></tr>
<tr class="company_type_row  company_type_row" id="company_type_row"><th><span id="for-id_company_type_0-">Company type:</span></th><td>
     <label for="id_company_type_0" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Private company limited by shares</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="LTD" id="id_company_type_0" class="ui-helper-hidden-accessible">
     <label for="id_company_type_1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" aria-pressed="true" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Private company limited by guarantee</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="LTG" id="id_company_type_1" checked="checked" class="ui-helper-hidden-accessible">
     <label for="id_company_type_2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Public limited company</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="PLC" id="id_company_type_2" class="ui-helper-hidden-accessible">
     <label for="id_company_type_3" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Unlimited company with share capital</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="USC" id="id_company_type_3" class="ui-helper-hidden-accessible">
     <label for="id_company_type_4" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Unlimited company without share capital</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="UWS" id="id_company_type_4" class="ui-helper-hidden-accessible">
</td></tr>

CSS 生成红色边框:

.error {border-width: 1px; border-color: red; border-style: solid;}

那么，我的问题:

1. 有什么好的方法可以阻止这种出血的发生吗？
2. 这是因为我使用了某种违反标准的功能，还是 Firefox 在这方面有问题？

Answer 1

在 FF 中尝试缩放后，我可以产生类似的结果，单击 view > zoom > reset 看看是否能解决问题