我有一个简单的css表。当我向中间行添加底部边框时,下一行有一个非常奇怪的边框。它只发生在chrome中,我不明白为什么。
我应该说我使用javascript将底部边框应用到中间行(因为我事先不知道表的大小)。我试着在没有javascript的情况下申请,而且没有奇怪的问题。
这是表格的一个例子,注意中间的边框: http://ri-cloud.appspot.com/super_tacticko?create
这是我用来创建中间线的javascipt:
// add the middle line
var half = height / 2; // it has to be zugi anyway
var $middle = $('tr').slice(half-1, half);
$middle.find('td').addClass('middle-td');
答案 0 :(得分:2)
如果调整窗口大小可以解决问题(就像我的情况一样),很可能是渲染错误...... Chrome中有很多这样的问题不时出现,主要是因为它试图加快速度比其他一切都是偷工减料(imo)。
解决错误的唯一方法是继续尝试不同的方法,直到找到一个不会触发问题的方法,或者尝试以编程方式调整表格/正文的大小,然后将其放回到再次正确的大小 - 这可能会迫使Chrome正确重绘...并且应该足够快地发生,用户不会注意到。第三种方法可以是完全用JavaScript构建表,一旦正确形成,就将其嵌入到页面中。
CSS方法可能起作用的原因是因为它将在渲染过程中的不同点使用Chrome的渲染方法,而不是JavaScript样式修改。
基本上,我看过Chrome做了一些非常奇怪的事情。我过去用来解决奇怪的Chrome问题的黑客攻击是:
30.1px
而不是30px
0.99
而不是1.0
.
的IP地址overflow: hidden
修复奇怪的渲染。
哦,仅仅是因为我在Windows 7上通过Chrome v25.0.1364.97查看的记录
答案 1 :(得分:1)
我在 Windows 10 上的 Chrome 中遇到了类似的问题。这个问题的原因是 Chrome 无法正常使用 Windows 文本大小设置功能(恕我直言,在 Win OS 中更改 DPI)。当我从 125% 文本大小切换到 100% 文本大小时,Chrome 正确呈现了我的 HTML 表格。据我测试,其他浏览器都可以使用此功能。
答案 2 :(得分:0)
最后我对这个问题做了如下快速修复:
table {
tr td {
border-color: transparent !important;
outline: 1px solid #666;
}
}
它不是防弹的,边框的大小是 2px,但总比没有好。