javascript - 适用于 IE8 的子像素舍入 JavaScript/jQuery 解决方案，适用于具有百分比宽度的表格单元格

Question

所以，显然 IE8 不会像 IE9+、FF 和 Webkit 浏览器那样接受 defaultView(因此没有 getCompulatedStyle)，这让事情变得很麻烦。确保浏览器不接受 defaultView 后，我使用以下函数重新渲染表格单元格的宽度:

function redimTable() {
    var containerWidth = 0;
    var numPerc = 0;
    var correctionWidth = (((1/2) / parseFloat(document.getElementById('kw-table').offsetWidth)*100));

    $($('#kw-table th').get().reverse()).each(function(j,k){
        if($(k).hasClass('w-5')){
            $(k).attr('width','5%');
        } else if ($(this).hasClass('w-10')){
            $(k).attr('width','10%');
        } else {
            $(k).removeAttr('width');
        }
    });

    $('#kw-table th').each(function(j,k){
        if($(k).attr('width')){
            containerWidth = parseFloat($(k).attr('width').replace('%','')) - correctionWidth;
            numPerc = numPerc + containerWidth;
            $(this).attr('width',containerWidth+'%');
        } else {
            numPerc = 100 - (numPerc);
            $(this).attr('width',numPerc+'%');
        }   
    });
}

根据 http://tylertate.com/blog/2012/01/05/subpixel-rounding.html 的说法，IE8 的舍入是“正确的方式”(顺便说一句，对于草率的编码感到抱歉)

但是，我生成的固定标题中的表格单元格仍然与实际表格的表格单元格不对齐，结构如下:

<table class="data-table" id="kw-table">

  <thead class="data-header">
  <tr class="labels-row">
    <th class="th0 w-a"><div class="a-l"><a href="">Keyword</a></div></th>
    <th class="th1 w-10"><div class="a-l"><a href="">Campaign</a></div></th>
    <th class="th2 w-10"><div class="a-l"><a href="">Ad group</a></div></th>
    <th class="th3 w-10"><div class="a-l"><a href="">Network</a></div></th>
    <th class="th4 w-10"><div class="a-r"><a href="">Clicks</a></div></th>
    <th class="th5 w-10"><div class="a-r"><a href="">Impr.</a></div></th>
    <th class="th6 w-5"><div class="a-r"><a href="">Avg. pos.</a></div></th>
    <th class="th7 w-10"><div class="a-r"><a href="">Status</a></div></th>
    <th class="th8 w-10"><div class="a-r"><a href="">Costs</a></div></th>
    <th class="th9 w-5"><div class="a-r"><a href="">Conv.</a></div></th>
    <th class="th10 w-5"><div class="a-r"><a href="">Est. bid first page</a></div></th>
  </tr>
  </thead>
  <tfoot class="data-footer">
  <tr class="sum-row">
    <td class="a-l">Total</td>
    <td class="a-l">&nbsp;</td>
    <td class="a-l">&nbsp;</td>
    <td class="a-l">&nbsp;</td>
    <td class="a-r">100.000</td>
    <td class="a-r">1.231.234.456</td>
    <td class="a-r">0,7</td>
    <td class="a-r">&nbsp;</td>
    <td class="a-r fin">&euro; 12.211.878,38</td>
    <td class="a-r">2.000</td>
    <td class="a-r fin">&euro; 0,30</td>
  </tr>
  </tfoot>
  <tbody class="data-body">
  <tr class="data-row first-row">
    <td class="a-l">Keyword</td>
    <td class="a-l"><a href="">Campaign</a></td>
    <td class="a-l"><a href="">Ad group</a></td>
    <td class="a-l">Search</td>
    <td class="a-r">49</td>
    <td class="a-r">4.116.017</td>
    <td class="a-r">3,6</td>
    <td class="a-r">enabled</td>
    <td class="a-r fin">&euro; 8,38</td>
    <td class="a-r">0</td>
    <td class="a-r fin last-cell">&euro; 0,30</td>
  </tr>
  </tbody>
</table>

还有 CSS:

.data-table {
  border-collapse:collapse;
  border-spacing:0;
  empty-cells:show;
  line-height:1;
  max-width:100%;
  margin:0;
  padding:0;
  position:relative;
  table-layout:fixed;
  overflow:visible;
  z-index:8;
}
.data-table th, .data-table td {
  border-width:1px;
  border-style:solid;
  border-collapse:collapse;
  border-spacing:0;
  box-sizing:border-box;
  font-size:0.75em;
  line-height:1.5em;
  padding:.5em .6em;
  vertical-align:baseline;
}

.cloned-table {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBgkAcIMAAAJAAgtVWAKwAAAABJRU5ErkJggg==);
  margin-left:0;
  padding-bottom:4px;
  position:absolute;
  top:0;
  z-index:9;
}
.cloned-table.fixed {
  position:fixed;
}

.a-l {text-align:left;}
.a-r {text-align:right !important;}
.fin {white-space:nowrap;}

th.w-5 {width:5%;}
th.w-10 {width:10%;}

我正在寻找的是有人为我指明正确的方向。

Answer 1

重新审视这一点并弄清楚:

cWidth = elem.getBoundingClientRect().right-elem.getBoundingClientRect().left;

解决了。不需要计算样式恶作剧等。