[英]IE8 Wordpress Website Compatibility Issue - Sidebar Showing on Bottom Of The Page
I have this website http://www.basketballworkouttips.com/jump-manual-review/ and the problem is when viewing it in IE8 the sidebar gets pushed down to the bottom of the page. 我有这个网站http://www.basketballworkouttips.com/jump-manual-review/ ,问题是在IE8中查看时,侧边栏被推到页面底部。 however, if I remove the review box from the page the side bar is showing ok.
但是,如果我从页面上删除了评论框,则侧栏显示为确定。 I want to keep the review box but I don't want my side bar to be pushed down.
我想保留评论框,但不希望将侧边栏下推。
any idea how to fix this? 任何想法如何解决这个问题?
Here's the review box code 这是评论框代码
<div class="review">
<div itemtype="http://schema.org/Product" itemscope="">
<div itemtype="http://schema.org/Review" itemscope="">
<div class="ta_rating_container ta_box_right" style="width:240px;">
<div id="ta_rating">
<div>
<div>Review of:
<span class="title item fn" itemprop="name">
<a onclick="_gaq.push(['_trackEvent', 'Affiliate Clicks', 'Jump Manual', '/jump-manual-review/-Review Box Link',, false]);" rel="nofollow" href="http://www.basketballworkouttips.com/go/jumpmanual" title="Jump Manual">Jump Manual</a>
</span>
</div>
<div class="clear"></div>
<dl>
<div class="clear_space"></div>
<div class="hr"><hr /></div>
<div>Reviewed by:
<span class="reviewer author byline vcard hcard">
<span class="author me fn" itemprop="author">Jesse Parker</span>
</span>
</div>
<dl>
<dt>Rating:</dt>
<dd>
<div class="ta_rating result rating" itemtype="http://schema.org/Rating" itemscope="" itemprop="reviewRating">
<meta content="1" itemprop="worstRating">
<meta content="5" itemprop="ratingValue">
<meta content="5" itemprop="bestRating">
<div class="result" style="width:100%;" title="5">5</div>
</div>
</dd>
</dl>
<div class="clear"></div>
<div class="clear_space"></div>
<div class="hr"><hr /></div>
<h3>Summary:</h3>
<div class="ta_description summary" itemprop="description">
<p>
<span>The Jump Manual is an effective program that will help you increase your vertical leap. The program is easy to follow and provides one on one coaching from it's author + exclusive 60 day money back guarantee. if you're looking to increase your vertical this program is the best one to go for.
</span>
</p>
</div>
</div>
<div class="rating_btn">
<a onclick="_gaq.push(['_trackEvent', 'Affiliate Clicks', 'Jump Manual', '/jump-manual-review/-Review Box Button',, false]);" itemprop="url" class="ar_button ar_orange" href="http://www.basketballworkouttips.com/go/jumpmanual" title="Download Jump Manual" rel="nofollow">Download Jump Manual</a>
</div>
<div class="clear"></div>
</div>
</div>
<div itemprop="reviewBody">
<div itemtype="http://schema.org/Thing" itemscope="" itemprop="itemReviewed">
<meta content="Jump Manual" itemprop="name">
</div>
This looks like a nesting issue. 这看起来像一个嵌套问题。 Your sidebar is within the same block element as your #content.
侧边栏与#content位于相同的block元素内。 Thusly floats will not work properly.
因此浮子将无法正常工作。 FireFox and other browsers are most likely auto-correcting it, but IE8 is limited and does not give guess work to assist.
FireFox和其他浏览器很可能会自动更正它,但是IE8受到限制,并且不提供猜测工作来提供帮助。
I would correct the issue by placing the #sidebar_wrap_right and placing it at the same level as #content. 我将通过放置#sidebar_wrap_right并将其与#content放在同一级别来解决此问题。 Then be sure to add a width to both in CSS and float the 2 divs left adding margin/padding as needed.
然后确保在CSS中都添加一个宽度,并根据需要浮动两个div并添加边距/填充。
I also have never seen the tag below that is rendering, it is possible you have some invalid HTML and CSS as well. 我也从未见过下面呈现的标签,有可能您还有一些无效的HTML和CSS。
<css3-container style="z-index: auto; position: absolute; direction: ltr; top: 5500px; left: 28px;">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.