【问题标题】:Firefox "bleeding" borders on tr - bug?火狐在 tr 上“出血”边界 - 错误?
【发布时间】:2011-10-07 13:05:32
【问题描述】:

我在表格中有一个表单,在出现错误时,我通过在该行的 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 在这方面存在缺陷?

【问题讨论】:

  • 使用 Firefox 5/Windows 7 对我来说看起来不错(与 Chrome 相同)。
  • 这里也一样。在 ff4/5 中工作正常尝试清除缓存!
  • 如果有足够多的人报告他们无法复制它,那么也许我的用户也无法复制它!

标签: html css firefox html-table


【解决方案1】:

在尝试放大 FF 后,我可以产生类似的结果,点击 view &gt; zoom &gt; reset 看看是否可以解决问题

【讨论】:

  • 其实我是在默认缩放中,所以 reset 什么也没做。选择 new 缩放可以清除它。我将把它报告为一个错误。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-11-04
  • 1970-01-01
  • 2020-03-29
  • 1970-01-01
  • 2013-02-13
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多