4

私は次のコードを持っています.Chromeの最後のバージョンでは、右側の列を強調表示した場合にのみ、何らかの理由でborder-rightが消えません。コードをコピーするだけで表示されます。ありがとうございました。

<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数学ポジショニングを使用する場合は、「問題」も取り除く ことができます。さらに、この不親切な線を98％取り除くために
使用できます。box-shadow

私があなたなら、初期状態で透明な境界線を使用するので、ジャンプは表示されません

于 2013-02-26T03:11:56.353 に答える
0

更新されたデモ

table widthあなたがそれらに値を提供し、％で与えられたので、問題はあなたにあると思いますpxので、示されているように％に完全に変更しました

<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 に答える