In IE Compat View, Developer tools shows elements "style" with the class of the previous element

StackOverflow https://stackoverflow.com/questions/22365456

Pregunta

*I am going to apologize up front for the wording I am about to use. I don't support Internet Explorer often and less frequently use the developer tools, so I am going to use words to describe how I think of it and what I see, but there may be better terms that I should be using.

I am working on a third party web-based software platform (BigMachines) and they are using CSS classes (named 'rule-hide') to selectively show or hide columns in a table.

The issue we are seeing is that the column after the "hidden" one is also hidden when viewed from IE running in "IE7 Standards" Document Mode

If we inspect the table in Developer tools, the correct 'co'l, 'th' and 'td' elements have the "rule-hide" class assigned, and those element are not shown, but additionally the elements immediately following these are not shown. It seems to be 1 for 1. So if we have only 1 element with this class, there is 1 additional element that gets hidden. If there are 2 with the class, then 2 extras are not shown.

In Developer tools, if we select the elements that aren't shown but should be, the class attribute is blank, but under Style it shows ".rule-hide" (and the associated 'display: none !important;') If we select an element that does show, it too does not have the class but it doesn't have it under Style.

If I create a local html file with the html below, Open it in IE with Document Mode = "IE7 standards", only "Description" and "Price Ea" are shown. "Cable Type" and "Cost Ea" are hidden. If I remove the class from either col or th, Cost Ea is shown.

<!DOCTYPE html>
<html>
    <head>
        <style>.rule-hide {display: none !important;}</style>
    </head>
    <body>
        <table>
            <col />
            <col class='rule-hide'/>
            <col />
            <thead>
                <tr>
                    <th>Description</th>
                    <th class='rule-hide'>Cable Type</th>
                    <th>Cost Ea</th>
                    <th>Price Ea</th>
                </tr>
            </thead>
        </table>
    </body>
</html>

Is this a common occurrence with IE in Compat View? Is there anything documented around what is going on, why it is happening, or how to correct it?

Any insight is greatly appreciated.

*Edited to include code

¿Fue útil?

Solución

As near as I can tell, secondary class definition is confusing IE7. I'm guessing it is acting on the TH first, then since that is gone, the colgroup rule-hide class is killing the second one, which at that point would be Cost EA.

adding to the head:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('col.rule-hide').removeClass('rule-hide');});</script>

Seems to return the missing columns, while leaving the desired hidden, hidden.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top