我的 mvc 应用程序有剑道网格,我已经为我的表的 tr:firstChild、td:firstChild 使用 position:absolute;
来实现列卡住。
最近,我们已经在我们的服务器上更新到 Chrome 45,在 Chrome 中,表格会像 <(col1), (blank space), (col2), (col3)> 和所有其他浏览器(包括以前版本的 Chrome)正在呈现我的表格格式正确 <(col1), (col2), (col3)>.
我什至无法检查我的 chrome 中的那个空白区域。
我找到的解决方案:
我写了一些 CSS 即:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.tablexyz tbody th:first-child,
.tablexyz tbody tr:first-child {
position: relative;
width: 240px;
top: auto;
left: 20px;
}
}
然后我在我的页面中使用 jQuery 并手动将其设置为绝对并且它工作正常:
$(".tablexyz tbody th:first-child").css({
position: "absolute",
width:"240px",
top:"auto",
left : "20px"
});
导致主要问题的原因是什么?如何仅使用 CSS 解决此问题?
最佳答案
我找到了部分问题和可能的修复。
这是一个 jsfiddle 示例设置:
https://jsfiddle.net/j8fr2m1a/
<table border="1">
<tr>
<th>Alpha</th>
<th>Beta</th>
<th>Gamma</th>
</tr>
<tr>
<td style="float:right;">1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th style="float:left;">Alpha</th>
<th>Beta</th>
<th style="float:left;">Gamma</th>
</tr>
<tr>
<td style="float:right;">1</td>
<td>2</td>
<td style="float:right;">3</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Alpha</th>
<th>Beta</th>
<th>Gamma</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br />
<table border="1">
<tr><th>Alpha</th><th>Beta</th><th>Gamma</th></tr>
<tr><td style="float:right;">1</td><td>2</td><td>3</td></tr>
</table>
Chrome 45 的表格问题是:
如果应用于列中单元格的样式不相等,则具有额外样式的行将在其布局中出现幻像单元格。
要解决此问题,请删除额外的样式,将样式应用于列中的所有单元格(值不需要相同),或删除表格行中单元格周围的空白。
关于jquery - Chrome 45 版本位置绝对问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32420843/