4

我有以下代码，并且出于某种原因，在上一个版本的 chrome 中，仅当您突出显示右侧的列时，右边框才不会消失。只需复制代码，您就会看到。谢谢你。

<DOCTYPE! html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Highlighting</title>
<style type="text/css">
body {
background-color: rgba(0,0,0,1);
}
#decor-table {
  font-family: Calibri, "Times New Roman", Arial;
  font-size: 13px;
  text-align: left;
  border-collapse: collapse;
}
#decor-table th {
  font-size: 14px;
  padding: 10px 10px;
  color: rgba(153,153,153,1);
  text-transform: uppercase;
}
#decor-table td {
  padding: 3px 10px;
  color: #369;
  vertical-align: middle;
}
#oce-first {
  font-weight: bold !important;
  background-color: rgba(204,204,204,0.2);
  border-bottom: 1px solid rgba(204,204,204,0.5);
}
.hover_class {
  color: rgba(225,225,225,1) !important;
  background: rgba(204,204,204,0.2);
  border-left: 1px solid rgba(204,204,204,0.5);
  border-right: 1px solid rgba(204,204,204,0.5);

}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function()
  {
  var cellClassName = false;
  $("td, th").hover
  (
      function()
      {
          cellClassName = $(this).attr("class");
          $("." + cellClassName).addClass("hover_class");
      },
      function()
      {
          $("." + cellClassName).removeClass("hover_class");
      }
  );
  });
</script>
</head>
<body>
<table width="900px" id="decor-table">
  <thead>
    <tr id="oce-first">
      <th width="17%" class="col1">test</th>
      <th width="18%" class="col2">test</th>
      <th width="13%" class="col3">test</th>
      <th width="11%" class="col4">test</th>
      <th class="col5">test</th>
      <th width="16%" class="col6">test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1">test</td>
      <td class="col2">test</td>
      <td class="col3">test</td>
      <td class="col4">test</td>
      <td class="col5">test</td>
      <td class="col6">test</td>
    </tr>
    <tr>
      <td class="col1">test</td>
      <td class="col2">test</td>
      <td class="col3">test</td>
      <td class="col4">test</td>
      <td class="col5">test</td>
      <td class="col6">test</td>
    </tr>
    <tr>
      <td class="col1">test</td>
      <td class="col2">test</td>
      <td class="col3">test</td>
      <td class="col4">test</td>
      <td class="col5">test</td>
      <td class="col6">test</td>
    </tr>
    <tr>
      <td class="col1">test</td>
      <td class="col2">test</td>
      <td class="col3">test</td>
      <td class="col4">test</td>
      <td class="col5">test</td>
      <td class="col6">test</td>
    </tr>
    <tr>
      <td class="col1">test</td>
      <td class="col2">test</td>
      <td class="col3">test</td>
      <td class="col4">test</td>
      <td class="col5">test</td>
      <td class="col6">test</td>
    </tr>
    <tr>
      <td class="col1">test</td>
      <td class="col2">test</td>
      <td class="col3"></td>
      <td class="col4"></td>
      <td class="col5">test</td>
      <td class="col6"></td>
    </tr>
    <tr>
      <td class="col1">test</td>
      <td class="col2"></td>
      <td class="col3"></td>
      <td class="col4"></td>
      <td class="col5">test</td>
      <td class="col6"></td>
    </tr>
    <tr>
      <td class="col1"></td>
      <td class="col2"></td>
      <td class="col3"></td>
      <td class="col4"></td>
      <td class="col5">test</td>
      <td class="col6"></td>
    </tr>
  </tbody>
</table>
</body>
4

2 回答 2

3

众所周知Chrome artifacts

LIVE DEMO

.hover_class {
  color: rgba(225,225,225,1) !important;  
  background-color: rgba(204,204,204,0.2);
  border-left: 1px solid rgba(204,204,204,0.5);
  border-right: 1px solid rgba(204,204,204,0.5);

  -webkit-transform: translate3d(0,0,0);    /* THIS WILL FIX IT */
}

使用%（默认情况下，表格单元格在 中%）Chrome 玩起来很聪明，并使用某种half-pixel-precision，这会导致像素移动到下一个留下被称为“工件”的痕迹，因此您需要某种骇人听闻的“重绘”。

如果您使用严格的 PX 数学定位，您还将摆脱“问题”
此外，您可以使用box-shadow98% 摆脱这种不友好的线条。

如果我是你，我会在初始状态上使用透明边框，所以不会看到任何跳跃

于 2013-02-26T03:11:56.353 回答
0

更新了演示

我认为问题出在您的问题上，table width因为您为它们提供了px价值并以 % 给出了 th，所以我已完全更改为 %，如图所示

<tr id="oce-first">
  <th width="20%" class="col1">test</th>
  <th width="20%" class="col2">test</th>
  <th width="20%" class="col3">test</th>
  <th width="14%" class="col4">test</th>
  <th width="16%" class="col5">test</th>
  <th width="10%" class="col6">test</th>
</tr>
于 2013-02-26T03:17:54.430 回答