我的代码在除 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);
最佳答案
我个人制作了一个 ie7.css 样式表,该样式表仅在浏览器是 ie7 时运行,并覆盖任何看起来不正确的元素,但添加 normalize.css
的版本 1 ( http://necolas.github.com/normalize.css/
)来预先重置填充、边距等。另请查看使用clearfix (http://www.webtoolkit.info/css-clearfix.html
) 而不是clear:both
关于jquery - 使用 jQuery 修正 IE7 中的显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8528529/