Compass @include float 的問題

No

Compass 中的 @include float 是為了解決 IE bug 而存在,所生出來的 css 是把區塊 display:inline 以及 float,這種做法一般來說不會有什麼問題,但如果要做 responsive design 的話,webkit 瀏覽器就很可能會遇到 float 的 問題,正常視窗縮小再放大時,原本 float 的元素會被擠到下方。

解決方案是讓 float-left 的 nav 區塊不要成為行內元素,連 inline-block 都不行,最乾脆做法是就不要使用 @include float 這樣的技法。但如果無論如何都要像上圖一樣置中的話,hlb 提供了一個奧步就是在維持 inline 的情況下給 nav min-width,這樣 webkit 瀏覽器就不會在發生往下擠的情形了。

Friday, January 13th, 2012

Category: CSS, Compass, Tutorials

Bookmark and Share