如何将类或样式应用于IE中的某些HTML元素？

Question

I'm doing an application that has to parse elements in an XML tree to HTML and in all the browsers it goes well but IE doesn't want to apply the styles to the elements. How could I fix this?

function add2Doc(elmnt, domDoc, newEl)
{
    /*
     * This function transform an 
     * element to into the an acceptable
     * part of another document, I know
     * exist some beatiful function called
     * importNode but IE, like always doesn't
     * accept.
     */
    if (typeof newEl == 'undefined'){ 
        var newEl = domDoc.createElement(elmnt.tagName);
    }
    if (elmnt.attributes.length > 0){
        for (var cont = 0; cont < elmnt.attributes.length; cont++){
            if (getBrowser() == 0){
                /*
                 * This part of the code it's for the
                 * assholes of MS, what doesn't have 
                 * any kind of consideration for 
                 * the others, this kind of things
                 * consume resources and 
                 * makes more slower the crap of IE.
                 */
                if (elmnt.attributes[cont].specified == true){
                    newEl.setAttribute(elmnt.attributes[cont].nodeName, elmnt.attributes[cont].nodeValue);
                }
            }else{
                    newEl.setAttribute(elmnt.attributes[cont].nodeName, elmnt.attributes[cont].nodeValue);
            }
        }
    }
    childs = elmnt.childNodes;
    if (elmnt.childNodes.length > 0){
        for (var cont = 0; cont < elmnt.childNodes.length; cont++){
            child = elmnt.childNodes[cont];
            if (child.nodeType == 1){
                newChild = new add2Doc(child, domDoc, domDoc.createElement(child.tagName));
                newEl.appendChild(newChild);
            }else if(child.nodeType == 3){
                if (getBrowser() == 1){
                    newEl.appendChild(domDoc.createTextNode(child.nodeValue));
                }else{
                        if (newEl.tagName == 'STYLE'){
                            newEl.csstext = child.nodeValue;
                        }else if (newEl.tagName == 'SCRIPT'){
                            newEl.text = child.nodeValue;
                        } else{
                        newEl.innerText = child.nodeValue;
                        }
                    }
            }

        }
    }
    return newEl;
}

Answer 1

You can either apply browser specific stylesheets or put inline css hacks to fix these things.

http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/

Answer 2

In addition to having the appropriate CSS class in your stylesheet, you need to do this:

var box = document.createElement("div"); 
box.className = 'your_css_class'; /*forces styling in ie*/

Answer 3

You should use conditional comments :

<!--[if IE]>
<script type="text/javascript">
// do something here
</script>
<![endif]-->

Article here : http://www.quirksmode.org/css/condcom.html