float 可說是常用的 css 屬性
但也常常會有 bug 出現
使用 float 的好處是可以將原本直列堆疊的區塊改為左右排列
float 加上指定寬度後，可以方便快速地讓重複的區塊變整齊
但 float 在 firefox 有個缺點，雖然他的解讀是正確的 _2007/08/24
若一個大區塊包住兩個直列堆疊的小區塊，兩個小區塊使用 float 之後
大區塊則因為小區塊浮動之後，小區塊跳出了原本的框框?
而且還是最不會出現 bug 的 firefox 出現了
此時只要在包住兩個小區塊的大區塊標籤上做設定即可以解決這樣的困擾~
假設 #box 包住了 .box1 和 .box2
.box1 { float: left; }
.box2 { float: right; }
則要多加一段:
#box:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
clear: both;
}
即可解決此問題
2007/08/24 有新的解決方案 (謝巧巧)
因為 :after 這個屬性 ie6 讀不到
但 ie6 需要用到 _height: 1%; 去解決 float 的問題
所以有了更簡短的解決方案也不需要用到 :after 設定~
#box {
_height: 1%;
overflow: hidden;
_overflow: none;
}
有但書，就是如果這個區塊有指定寬或高的話~
overflow: hidden; 會把超出的文字硬是截斷
--
而另外一個 float 的 bug 則是出現在 IE6
使用 float 區塊中的最後一個字元莫名出現了重複的字並且可能跳出了原框架內
似乎是因為 html 原始碼中的注釋造成的問題，但也無法確切證明
雖然 IE6 原本就時常出現奇怪的 bug
但這樣的 bug 的確讓人非常困擾
- 以上 -
文章標籤
全站熱搜
My Life (9)
記下來記下來...(抄筆記中) -- 怎麼突然寫了這些bug，受不了嗎
因為我怕我忘記我超健忘的~ 但我不是腦殘絕對不是~ (撇清)
好感人哪～ 那串消掉float的語法不是我教你的嗎～感動．．． 不過傻學生啊，你有一個大誤解喔 float在標準css中的定義本來就是會讓被float的物件的父元素不再接受它的高度 firefox那樣的解讀其實是正確的， 並不像你所說的是firefox的bug喔！ （替firefox伸冤） 而IE也有它的css解法～ 你說的第二個IE重複文字的bug就真的是bug了 不過，這個bug，其實也有css解法 但解法有點複雜，上班見面再教你... 你不用真的傻傻的去改html啦！ css的問題都馬可以用css解...
沒有錯是阿巧老師教我的呀哈哈~ 原來 firefox 的解讀是對的~ (記下來) - 文字重複的 bug 好困擾喔~ 快教我快教我~ 你是蟲蟲殺手巧空楚~ 而且我今天在找你呢~ 我要問你星期五要不要唱歌~ 美術部都要去你不能缺席我們來喝酒 (奸笑)
（拿筆記本抄起來） 看到:after和content又跑回去翻spec… 我果然還有很多東西要學啊 T_T
還用筆記本抄起來勒~ 囧 我也有超多還要學的~ 我整個嫩嫩的 (羞)
不知道該在哪裡問 ... 留言版殺無赦 =口= 這裡可以嗎? (望) -- 我在誰來我家用float:left這個設定， 參考了你寫的方法No2 不過瞳瞳說FF還是會擠在一起 莔 我還沒有試過方法No1，因為不清楚標籤加上:after或是:before的屬性用意是什麼， 可不可以告訴我一下 ~ -- ：P
因為使用的位置不對~ 一定有效我用就有效~ 用錯位置才會無效~ -- 說了不能問還問是怎樣?
說了不能問還問是怎樣? =========================== 並沒看到文章中說不能問 樓主也真是太小氣了吧
呃... 他留言的時間是 2007 年 當時我留言板有說不回答 CSS 相關問題 現在是翻舊帳嗎~? XD 我就是不想回答怎麼樣 哈哈哈哈哈哈
原來是這樣子哦 那我誤會了 真是不好意思呢 沒有看清楚留言的時間~拍謝
哈哈以前有段時間很不想回答CSS問題 就很任性地拒絕了大家問問題~ 現在還OK，有看到就回一下~
嗯嗯嗯~~~SO GA 版主不好意思哦 可不可以跟妳討教2個問題~ 如果不方便就算了 我再自己慢慢研究 就是我最近逛到有些人的部落格 在搜尋旁邊都有一個小圖示 像她這樣 http://paula3844.pixnet.net/blog/post/24542470#comment-26624959 我也滿想要那樣子 比較美觀 可是我只會放背景CSS 後面要設定的一些其他就不太會 我看版主的那個框框都會變成圓角匡 就是在寫注意事項的那個框 請問那個框是HTML語法嗎 還是本身設定在CSS內 不曉得您可不可分享教教我呢 感恩回答~
這個設定會有點複雜耶~ 直接用回應很難一次講清楚~ 下次我直接寫教學文章好了 = =" sorry
樓主 搜尋旁邊有圖示我已經會了 只是不曉得妳是否可以分享那個圓角框 ^^謝謝妳
圓角框的部分~ 就是說你在貼文章的時候... 要把想要被圓角區塊用div包起來~ 並且給他一個 class，如下： <div class="notice">內容</div> 然後在 css 裡面加入： .notice { -khtml-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } 給他背景顏色或是框線即可~ 但這個 IE 系列不支援~ 所以 IE 不會出現圓角~