I am using a table to render a calendar. I have noticed an odd rendering bug in table cell border rendering in Firefox version 3.6 through 7. Here's a screen capture:
我正在使用一个表来呈现日历。我注意到在Firefox 3.6到7版本的表单元格边框渲染中有一个奇怪的渲染错误。这里有一个屏幕截图:
As you can see, the border gets "bent" when I scroll. Also, there are gaps between the horizontal and vertical border where it isn't "bent". A live example can be seen on this web site.
正如你看到的，当我滚动的时候，边框会“弯曲”。此外，在没有“弯曲”的水平边界和垂直边界之间也有空隙。在这个网站上可以看到一个活生生的例子。
I don't see this behavior in Chrome, Safari, or Internet Explorer.
我在Chrome、Safari或ie浏览器中看不到这种行为。
UPDATE
更新
I am still seeing this issue in Firefox 20. I have noticed that single pixel borders do not exhibit this behavior, only two pixels or more.
我仍然在Firefox 20中看到这个问题。我注意到，单个像素的边框没有显示这种行为，只有两个或更多的像素。
1 个解决方案
#1
5
You have a problem whith border-collapse:
你有一个边界塌陷的问题:
Here is a solution for your problem: http://www.charlesgarwood.com/blog/?p=13
这里有一个解决问题的方法:http://www.charlesgarwood.com/blog/?
What to do:
怎么做:
- change
border-collapsefromcollapsetoseparate - 将边界崩塌从崩塌变为分离
- change the
border-widthof the<td>s and<th>s from2pxto1px - 将s和的宽度从2px改为1px。
- give the
<table>itself a1pxborder -
为
设置一个1px的边框
Give some conditional comments like described in the link
给出一些条件注释，如链接中所描述的
#1
5
You have a problem whith border-collapse:
你有一个边界塌陷的问题:
Here is a solution for your problem: http://www.charlesgarwood.com/blog/?p=13
这里有一个解决问题的方法:http://www.charlesgarwood.com/blog/?
What to do:
怎么做:
- change
border-collapsefromcollapsetoseparate - 将边界崩塌从崩塌变为分离
- change the
border-widthof the<td>s and<th>s from2pxto1px - 将s和的宽度从2px改为1px。
- give the
<table>itself a1pxborder -
为
设置一个1px的边框
Give some conditional comments like described in the link
给出一些条件注释，如链接中所描述的