jquery - 使用 jQuery 修正 IE7 中的显示

Question

我的代码在除 IE7 之外的所有浏览器中都能正确显示，我不知道为什么。我已经浏览了很多有关 IE7 问题的线程，但无济于事。类似的 li 标签元素有六个。他们应该连续三个出现。这是 HTML 的一部分:

<div id="winning-designs" class="product-section">
    <h2 class="section-heading">Winning logo designs</h2>
    <ul class="winning-designs-list">
<li class="winning-design">

    <!-- thumb -->
    <a href="#" class="lightbox-trigger" title="View case study" data-lightbox-target="winning-design1-lightbox">
        <img src="/static/images/category-product-pages/logo-design/example1-thumb.png" width="268" height="160" />
        <p class="larger-link">View case study</p>
    </a>

    <!-- lightbox -->
    <div id="winning-design1-lightbox" class="lightbox winning-design-lightbox">
        <div class="lightbox-content">

            <div class="winning-design-info">
                <h3>Carplanet.com.au</h3>
                <p>Carplanet.com.au is an Australian based website that reviews new cars. They didn't have a predefined brand or color scheme in mind, so allowed designers to have complete artistic freedom for this logo.</p>
                <ul>
                    <li class="contest-stat">Paid <span class="symbol">$</span><span class="amount">709</span></li>
                    <li class="contest-stat">Received <a href="/logo-design/contests/car-review-company-requires-logo-36577" title="View contest">202 designs</a></li>
                </ul>
            </div>

            <div class="winning-design-feature">
                <div class="enlarged-image-wrapper">
                    <a href="/logo-design/contests/car-review-company-requires-logo-36577">
                        <img data-src="/static/images/category-product-pages/logo-design/example1-large.png" />
                    </a>
                </div>
            </div>

        </div>
    </div>

</li>

这是我的 jQuery:

m360_empty($("#intro-examples")); 
m360_empty($(".join-msg")); 
$(".lightbox-trigger img").width(90); 
$(".lightbox-trigger img").height(54); 
var wd_html = "<div id='winning-designs' class='product-section'>" + $('#winning-    designs').html() + "</div>";
m360_empty('#winning-designs'); 
$("#intro-examples").html(wd_html);

var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
 if (ie7) { 
  wd_html = "<div id='winning-designs' class='product-section'>" + $('#winning-  designs').html() + "</div>";
  wd_html_ie = "<table border='0' width='440'><tr border='0'><td border='0'>" + wd_html + "</td></tr></table>";
  $("#intro-examples").html(wd_html_ie);
}

$("#winning-designs").width(440);
$("#intro-msg").width(450);

$("#lightbox").css("align", "center");

(function($) {

$('.lightbox-trigger').click(function() {
target = $(this).attr('data-lightbox-target');
$('#' + target).lightbox_me({
    centered: true
    });
return false;
});

})(jQuery);  

Answer 1

我个人制作了一个 ie7.css 样式表，该样式表仅在浏览器是 ie7 时运行，并覆盖任何看起来不正确的元素，但添加 normalize.css 的版本 1 ( http://necolas.github.com/normalize.css/)来预先重置填充、边距等。另请查看使用clearfix (http://www.webtoolkit.info/css-clearfix.html) 而不是clear:both