2009年8月30日 星期日

float:left時,div區塊會穿透過去問題

今天再用css作layout的時候遇到的一些問題
想說用smarty寫個留言版給blog用,於是模擬了下列欄位

HTML

<div class="guestpost">
<div class="header"><!--{$curr->topic}--></div>
<div class="info">
<div class="icon"><!--{$curr->icon}--></div>
<div class="item"><!--{$curr->name}--></div>
<div class="item"><!--{$curr->email}--></div>
</div>
<div class="post"><!--{$curr->post}--></div>
<div class="floor"><!--{$curr->date}--></div>
</div>


css碼

.guestpost{ border:1px #C00 solid}
.guestpost .header{ border:1px #009 solid}
.guestpost .info .icon{ float:left; width:100px; height:100px; border:1px #009 solid;}
.guestpost .info .item{ border:1px #0a9 solid; }
.guestpost .post{ clear:both; border:1px #d09 solid; min-height:200px;}
.guestpost .floor{ text-align:right; border:1px #dd9 solid}


結果如下圖所示


class為item區塊他的border延伸到icon區塊,float:left效果只對文字作出反應
但是對於div原先的size並沒有做出相對的反應,所以他的邊界依然跟icon區塊重疊

後來想到用overflow:hidden來隱藏那不該顯示的區塊

.guestpost{ border:1px #C00 solid}
.guestpost .header{ border:1px #009 solid}
.guestpost .info .icon{ float:left; width:100px; height:100px; border:1px #009 solid;}
.guestpost .info .item{ border:1px #0a9 solid; overflow:hidden ; }
.guestpost .post{ clear:both; border:1px #d09 solid; min-height:200px;}
.guestpost .floor{ text-align:right; border:1px #dd9 solid}


結果如下


好極了,這次item區塊的邊界沒有透到icon區塊去
但是後來測試發現,這效果在IE6下沒有用(又是IE)
儘管IE7、8還有firefox都能正常顯示,但是還是得顧慮到IE6的用戶

後來發現把item的position屬性設置就能解決IE6的這個bug

最終css碼如下

.guestpost{ border:1px #C00 solid}
.guestpost .header{ border:1px #009 solid}
.guestpost .info .icon{ float:left; width:100px; height:100px; border:1px #009 solid;}
.guestpost .info .item{ border:1px #0a9 solid; overflow:hidden ; position:relative }
/*overflow:hidden一定要加 不然框線會向左突出到float:left的區塊 position:relative 針對IE6 設定了overflow才有效果 */
.guestpost .post{ clear:both; border:1px #d09 solid; min-height:200px;}
.guestpost .floor{ text-align:right; border:1px #dd9 solid}

沒有留言: