2/28/2007

IE7 的bug

在 positioniseverything.net 中所提到IE5/6的bug, 在IE7都已經修正, 唯一還延續著的是 "Escaping Float Bug"
(原文刊載於 IEblog: http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx )

範例: 一個設定黑色外框及邊界的div內, 包覆幾個float left的小正方形div,
正常流覽器顯示的畫面如下:


但是IE的畫面中, 框線會內縮, 無法正常撐開


提供的修正方法是在設定外框這組div加上以下一段css (或者避免做這種外框或底色的設定)

/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */

這個範例完整的css寫法如下

(外框設定)
.floatholder {
border: 2px solid #000;
margin: 0 40% 20px 10%;
}

(小正方形設定)
.floatbox {
float: left;
width: 50px;
height: 50px;
margin: 2px;
background: #bb7;
color: #ffd;
text-align: center;
}

(修正的css)
/* hide from IE-mac \*/
* html .hollyhack {height: 1%;}
/* end hide */
(第一行讓IE-mac版隱藏, 第二行設定* html . hollyhack 高度為1%, 第三行為純註解)


範例的html寫法如下:
(參考網址: http://www.positioniseverything.net/explorer/escape-floats.html )

- - > 請注意 ”floatholder” 和 “hollyhack”為二組並存的class, 中間要空一格

<div class="floatholder hollyhack">

<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
……………………………………..
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>

<div style="clear: both;">
</div>


p.s. IE7修正 positioniseverything.net 上所說的bug如下, 可以點進去看範例, 唯一沒修正的就是上面說的"escaping floats", 計畫將來會修正
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)