[英]Ie7 float right bug?
我有一個右浮動的div。 在該div內還有另外兩個div。 第一個div具有背景顏色,當我刷新時,它會“滲出”到第二個div中。 (有時在它前面有時在它后面。)當我滾動時,它會自行修復。 當我刷新時,它會再次執行。 這僅在IE7中發生。 錯誤? 下面的代碼
#sidebar {float:right;width:310px;}
#articleSidebar {background:#DEE7E7;margin:0 5px 20px 5px;position:relative;}
#articleSidebarHeader {margin-top:10px;padding:5px;}
#articleSidebar h2, #articleSidebarHeader h2 {color:#5A5A5A;font-size:14px;font-weight:bold;}
#articleSidebar ul {color:#5A5A5A;font-size:11px;padding:0 7px;}
#articleSidebar ul li {background: transparent url(../images/bulletSquare9C.png) no-repeat scroll left 6px; padding:0 0 10px 7px;}
#articleSidebar ul li a {color:#5A6B73;display:block;text-decoration:underline;}
#articleSidebar ul li a strong {font-weight:bold;}
#sidebarAd {margin:0 5px 20px 5px;position:relative;}
<div id="sidebar">
<div id="articleSidebar">
<div id="articleSidebarHeader">
<h2>Title here TBD</h2>
</div>
<ul>
<li><a href="replaceMe">link</a>text</li>
<li><a href="replaceMe">link</a>text</li>
<li><a href="replaceMe">link</a>text</li>
<li><a href="replaceMe">link</a>text</li>
</ul>
</div>
<div id="sidebarAd">
<!--300x250 ad here-->
<iframe src="http://www.google.com" height="250" width="300" scrolling="no" frameborder="0"></iframe>
</div>
</div>
在IE6和7中,我通常使用position:static
和zoom:1
來解決問題。
我認為您的相對定位是問題的一部分。 兩個DIV具有相同的相對位置。 我認為也許在IE7中,在應用“相對”定位之前,元素原始位置的位置和高度/寬度沒有正確計算。
想到的解決方法是:
使用絕對定位。 這樣可以在重新定位之前將元素從DOM中移出,同時不保留它們在頁面中將占據的空間。 在這種情況下,定位值不能相同或彼此重疊。
首選方法使用“ floated” div可以達到聽起來像您正在做的效果。 您可以指定邊距CSS定義來實現相同的視覺布局,而不是相對定位。
#articleSidebar {background:#DEE7E7;float:left;margin:0 5px 20px 5px;} #sidebarAd{margin:0 5px 20px 5px;float:left;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.