发表新帖
发表新帖

CSS doesn't apply to dynamically created elements in IE 7?

后端 未结
关注
7 1495
不思量自难忘°
不思量自难忘° 2021-02-13 10:32

Still looking for an answer.

Changing or reassigning to the filter\'s innerHTML successfully redraws the element, but breaks my script, so that\'s out.

相关标签:
7条回答
  • 南旧
    2021-02-13 11:11

    Don't you need a width as well as a height on the element? I know display: block should give it width: 100%, but IE is not that bright. Does anything change if you provide a width?

    0 讨论(0)
  • 萌比男神i
    2021-02-13 11:15

    Could it be that you're missing " at the end of some elements?

    <a ... class="filter_delete_link>Delete</a> missing "
<div class="filter_field> missing "
    0 讨论(0)
  • 情书的邮戳
    2021-02-13 11:27

    Sounds to me like you need to force a redraw of the UI for this element. There are several ways to do this, but the following is the most effective method...

    // elm is a reference to your element
var disp = elm.style.display;
elm.style.display = "none";
var redrawFix = elm.offsetHeight;
elm.style.display = disp;

    Here is another method I found on Ajaxian...

    function redraw(elm) {
  var n = document.createTextNode(' ');
  elm.appendChild(n);
  setTimeout(function(){ n.parentNode.removeChild(n) }, 0);
  return elm;
}
    0 讨论(0)
  • 时光取名叫无心
    2021-02-13 11:30

    The problem, I've discovered is that IE 6/7 doesn't register the class name changes with elm.setAttribute('class','x') until the UI is redrawn.

    The solution is to use the form elm.className = 'x'

    **This problem was also noticeable from moving from IE9 quirks to standards mode. The solution was the same.

    0 讨论(0)
  • 一向
    2021-02-13 11:32

    IE6/7 has a lot of problems/bugs/misbehaviours with regard to creating and adding elements in the DOM using createElement. I strongly recommend to switch to jQuery for this since it does all the work in a cross browser compatible manner and has already taken (almost) all the IE6/7 specific misbehaviours into account so that you don't need to end up with a doubled amount of code to get it to work in all browsers the world is aware of. Here's a copy'n'paste'n'runnable SSCCE:

    <!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#add').click(function() {
                    var newElement = $('<div class="filter"><a href="#" class="delete">delete</a></div>');
                    $('#container').append(newElement);
                });
            });
        </script>
        <style>
            .filter { background: pink; }
            .delete { background: yellow; }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <button id="add">add</button>
    </body>
</html>

    Update: as per the comments, jQuery is absolutely not an option. Well, best what you can try is to set element attributes only after the element is been added to the DOM. Also try not to clone nodes in IE6/7, this is often epic fail. Rather create a brand new node from beginning on.

    0 讨论(0)
  • 野趣味
    2021-02-13 11:35

    You have a missing " on the line that reads <a ... class="filter_delete_link>Delete</a>

    Edit:
    I don't think it's a problem with IE7 as it seems to work fine here - http://jsfiddle.net/nhvrA/.
    I'll keep investigating.

    0 讨论(0)
 看不清?
提交回复
热议问题