3
IE7以外のすべてのブラウザでコードが正しく表示されていますが、その理由はわかりません。私は、IE7の問題について多くのスレッドを無駄にしてきました。 6つの同様のliタグ要素があります。彼らは3列に並んで現れるはずです。ここではHTMLのセクションです：jQueryでIE7で表示を修正しました
<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);
関連するコードだけに縮小する必要があります。つまり、JavaScriptには未定義の関数呼び出しが含まれており、必要以上のマークアップがあります。また、jsFiddleを作成することを検討してください。 – Jacob
あなたのCSSはどこですか？ IE 7には、一般的にあなたが持っているレイアウトの問題を修正するいくつかのハックがあります。例えば、IE 7は 'inline-block 'については知らないので、CSSルールに' * display：inline'を含めてIE 7をターゲットにする必要があります。 – Jasper
IE7のためだけにHTMLの別のブロックを作成しました。 – user1090588