HTML:
<div class="table" >
<div class="row" >
<span>Table with DIV</span> <span>column2</span> <span>column3</span>
</div>
<div class="row" >
<span>column1</span> <span>column2 test</span> <span>column3</span>
</div>
<div class="row" > <span>column1</span> <span>column2</span> <span>column3 test</span>
</div>
</div>
<table>
<tr id="testRow">
<td>Table with <'table'></td> <td>column2</td> <td>column3</td>
</tr>
<tr >
<td>column1</td> <td>column2 test</td> <td>column3</td>
</tr>
<tr >
<td>column1</td> <td>column2</td> <td>column3 test</td>
</tr>
</table>
CSS:
.table, table {
display:table;
/*
width:200px;
height:100px;
zoom:1;
*/
}
.row { display:table-row; }
.row, tr {
width:200px !important;
min-height:1px !important;
zoom:1;
white-space:nowrap;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
.row span, td {display:table-cell;padding: 5px;}
Javascript
$(function () {
console.log (document.getElementById('testRow2').currentStyle.hasLayout);
//$('.row, tr').fadeTo('fast',0.2);
});
Since the opacity is not functioning properly, 'false' should be displayed in the console (for IE7&8), but it actually shows 'true'
Is the element truly 'hasLayout' BUT the opacity is not working for some other reason?
Even jQuery cannot set the opacity as expected.