Why is IE7 & IE8 says that it 'hasLayout', when it doesn't?

Question

HTML:

  <div class="table" >
      <div class="row" >
        <span>Tb with DIV</span> <span>col2</span> <span>col3</span>
      </div>
        <div class="row" >
        <span>col1</span> <span>col2 test</span> <span>col3</span>
      </div>
        <div class="row" > <span>col1</span> <span>col2</span> <span>col3 test</span>
      </div>
    </div>

    <table>
      <tr id="testRow">
        <td>Tb with <'table'></td> <td>col2</td> <td>col3</td>
      </tr>
      <tr >
        <td>col1</td> <td>col2 test</td> <td>col3</td>
      </tr>
      <tr >
        <td>col1</td> <td>col2</td> <td>col3 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);
});

jsbin jsfiddle

Because the opacity is not working I should get 'false' in the console (for IE7&8), but the result is 'true'

Does the element truly 'hasLayout' BUT the opacity is not working for some other reason?

Although I doubt it, because not even jQuery can't set the opacity.

@jbabey a property of the currentStyle object: http://msdn.microsoft.com/en-us/library/aa703980(v=vs.85).aspx & http://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx — silversky, Sep 03 '13 at 15:51

score 0 · Answer 1 · answered Sep 04 '13 at 06:21

0

Looks like all "table" elements have hasLayout===true by default. The opacity for tr is not working, since you need to define opacity for td instead.

answered Sep 04 '13 at 06:21

Teemu

22,918
7
53
106

That is true they do have 'hasLayout' by default. That's why is even more intriguing why is not working. (The fact that I could set the opacity on 'td' is besides the point, because on all other browsers except IE<=8, you can set the opacity on the 'tr' ) – silversky Sep 04 '13 at 11:25
Well, IE has totally different table model anyway, why would it make an exception with `opacity` : ) Btw. what is the assumed connection between `opacity` and `hasLayout`? – Teemu Sep 04 '13 at 11:28
You can't use opacity on an element that doesn't have 'hasLayout' (this is also valid for jQuery fadeTo() ) – silversky Sep 04 '13 at 13:21

Why is IE7 & IE8 says that it 'hasLayout', when it doesn't?

1 Answers1