0
我有一个甘特图类型的网页控件：一个html表格（例如一个单元格表示一天）和一些绝对定位的div - 父元素的div是TD的合适开局。我设置了div的宽度，以便覆盖适当的天数。宽度是通过将div覆盖的单元格的offsetWidth值相加来计算的。当Firefox 4报告表格单元格的偏移偏移量不一致时，解决方法是什么
这可以在IE7，Chrome和Opera（以及我认为在Firefox 2中）中正常工作，但不在Firefox 4中。 div的长度有时太短，有时太长。从寻找到这个问题似乎是与类似that described here
的子像素问题做我所看到的（参见下面的HTML源代码）是，我100％的宽表（其offsetWidth据报道，1311 PX）分为30个细胞，平均需要43.7 px。显然，它必须使用整数，但Firefox 4报告每个单元格的offsetWidth = 44像素，因此对于覆盖每个单元格的div的offsetWidth是1320像素（9像素到大）。显然，表保存其宽度为1311像素，指示单元格偏移量可能报告44，当某些情况下单元物理上占用43个像素时
与chrome和opera以及IE7相比，单元格的offsetWidth是44和43的混合但加起来到正确的最终宽度1311.
问题是我该如何解决这个Firefox4的行为，以确保我的div有正确的长度。
我还没在IE
的其它版本测试这里的问题的一个简化的工作例如：）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<title>Planner Test</title>
<style type="text/css">
body
{
font-size:10px;
}
table
{
width:100%;
border-collapse:collapse;
border-spacing:0px;
table_layout:fixed;
margin: 0px 0px 0px 0px;
padding: Opx 0px 0px 0px;
}
table td,
table th
{
overflow: hidden;
vertical-align:top;
height:19px;
border:1px solid red;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
div.PlannerItem
{
text-align:right;
overflow: hidden;
position:absolute;
height:16px;
border: solid 0px black;
background-color: yellow;
color: #334575;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function WIDTH(el) {
// use offsetWidth - supposed to be most consistent accross browsers
return parseInt(el.offsetWidth);
}
function createRows()
{
var nbCells = 30; // set to vary the number of cells
var thead = document.getElementById("tablehead");
var fragment = document.createDocumentFragment();
var row = document.createElement("tr");
var th;
// create header row % width calculated from nbCells
for(i = 0; i < nbCells; i++) {
th = document.createElement("th");
th.style.width = (100.0/nbCells) + "%";
row.appendChild(th);
}
fragment.appendChild(row);
thead.appendChild(fragment);
// body rows
var tbody = document.getElementById("tablebody");
for (i = 0; i < nbCells; i++) {
fragment = document.createDocumentFragment();
row = document.createElement("tr");
for (j = 0; j < nbCells; j++) {
var cell = document.createElement("td");
if (j == 0) {
var div = document.createElement("div");
div.className = "PlannerItem";
cell.appendChild(div);
}
row.appendChild(cell);
}
fragment.appendChild(row);
tbody.appendChild( fragment);
}
setWidths();
}
function setWidths()
{
var rows = document.getElementsByTagName("tr");
// show cell widths in header
cells = rows[0].getElementsByTagName("th");
for(i = 0; i < cells.length; i++) {
cells[i].innerHTML = WIDTH(cells[i]);
}
// calculate widths for divs
for(i = 1; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
var width = 0;
var div = cells[0].firstChild;
for(j = 0; j < i; j++) {
width += parseInt(WIDTH(cells[j]));
}
div.style.width = width + "px";
div.innerHTML = WIDTH(div);
}
}//]]>
</script>
</head>
<body onload='createRows();'>
<form id="form1" runat="server" >
<table id="tab">
<thead id="tablehead">
</thead>
<tfoot></tfoot>
<tbody id='tablebody'></tbody>
</table>
</form>
</body>
</html>