适用于 IE8 的子像素舍入 JavaScript/jQuery 解决方案,用于具有百分比宽度的表格单元格
Sub-pixel rounding JavaScript/jQuery solution for IE8 for tablecells with percentual width
所以,显然IE8不会像IE9+,FF和Webkit浏览器那样接受defaultView(因此没有getComputedStyle),这让事情变得麻烦。在确保浏览器不接受默认视图后,我使用以下函数重新渲染表格单元格的宽度:
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+'%');
}
});
}
因此,IE8 轮"以正确的方式"(顺便说一下,对不起,编码草率
),根据 http://tylertate.com/blog/2012/01/05/subpixel-rounding.html但是,我生成的固定标题中的表格单元格仍然与实际表格的表格单元格不一致,结构如下:
<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"> </td>
<td class="a-l"> </td>
<td class="a-l"> </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"> </td>
<td class="a-r fin">€ 12.211.878,38</td>
<td class="a-r">2.000</td>
<td class="a-r fin">€ 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">€ 8,38</td>
<td class="a-r">0</td>
<td class="a-r fin last-cell">€ 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%;}
我正在寻找的是有人为我指出正确的方向。
重新审视并弄清楚:
cWidth = elem.getBoundingClientRect().right-elem.getBoundingClientRect().left;
解决了它。不需要计算风格的恶作剧等。
相关文章:
- 将函数的上下文应用于javascript变量
- keyup事件处理程序更改焦点不适用于快速键入
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- PHP中的setcookie仅适用于localhost
- 包括用于facebook评论框的JavaScript SDK
- 如何检测用于WebGL的专用或集成显卡
- ng更改事件不适用于Dropdown
- 用于搜索的聚合物嵌套绑定
- jQuery表单添加不适用于下拉列表
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- JS编译器/包管理器,用于版本控制
- 将CSS应用于printWindow.print();在Javascript中
- 用于'魔术串'属性
- 用于检查数组中是否存在元素的javascript自定义方法
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 在ajax成功后,cluetip不适用于首次点击活动元素
- 适用于 IE8 的子像素舍入 JavaScript/jQuery 解决方案,用于具有百分比宽度的表格单元格
- 将nvd3 angularJS百分比四舍五入用于累计折线图
- 用于百分比输入和验证的Angular指令(初始验证不起作用)