Какой обходной путь, когда Firefox 4 сообщает о несовместимом offsetWidth для ячеек таблицы
У меня есть веб-элемент управления типа диаграммы Ганта: html-таблица ячеек (например, одна ячейка представляет один день) и некоторые абсолютно позиционированные div-ы, представляющие столбцы - родительский элемент div является подходящим начальным TD. Я установил ширину div, чтобы они покрывали соответствующее количество дней. Ширина рассчитывается путем суммирования значений offsetWidth ячеек, охватываемых div.
Это работает правильно в IE7, Chrome и Opera (и я думаю, в Firefox 2), но не в Firefox 4. Длина div иногда слишком короткая, иногда слишком длинная. Из рассмотрения проблемы кажется, что это связано с проблемой субпикселя, подобной описанной здесь
То, что я вижу (см. Исходный HTML ниже), это то, что моя таблица шириной 100% (ее смещение offsetWidth составляет 1311 пикселей) разделена на 30 ячеек, которые в среднем должны занимать 43,7 пикселей. Очевидно, что он должен использовать целые числа, но Firefox 4 сообщает, что каждая ячейка имеет offsetWidth = 44 пикселя, таким образом, для div, который покрывает каждую ячейку, его offsetWidth составляет 1320 пикселей (от 9 пикселей до большого). Очевидно, таблица сохраняет свою ширину 1311 пикселей, что указывает на то, что смещение ячейки, вероятно, составляет 44, тогда как в некоторых случаях ячейка физически занимает 43 пикселя.
По сравнению с Chrome, Opera и IE7 смещение ширины ячеек составляет 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>
1 ответ
Похоже, использование getBoundingClientRec() вместо offsetWidth (см. http://weblogs.mozillazine.org/roc/archives/2008/01/subpixel_layout.html) решает проблему - необходимо рассчитать ширину div, используя это значение, чтобы не потерять точность: элементы div в этом случае правильно выстраиваются