偷懶的inline block解決方法

2022-08-05 02:42:10 字數 1170 閱讀 6249

最近這幾天看了inline-block的用法,用它來代替浮動實現水平排列很不錯,只是要解決一下瀏覽器相容和間隙的問題。關於ie6,7的相容問題 《inline-block 前世今生》(裡講解的很細緻深入,解決辦法也講的很詳細,在這裡自己就簡單記錄下。

首先就是inline-block在ie6,7的表現,行內元素在設定inline-block之後表現出來的就是水平排列,但是塊級元素仍然是自上而下排列,截圖如下:

關於這個差異解釋是,在ie6,7下行內元素的inline-block觸發了haslayout屬性,其表現和inline-block類似,而塊級元素觸發了haslayout也不能水平排列,所以要解決這個差異,可以用inline讓塊級元素轉行成inline元素得以換行,然後用zoom:1觸發haslayout,所以有了以下**:

*display:inline; /* 其實是針對ie6、7 block 元素 */

*zoom:1;

這樣修復以後,ie6,7下塊級元素表現的很好,水平排列並且沒有間隙,但是行內元素有間隙,其他瀏覽器如ff,chrome也有間隙,截圖如下:

造成這個間隙的是空白符,換行回車都會產生這個空白符,上面提到的博文裡很細緻的解決了這個問題,但是我個人比較懶,覺得解決方法比較繁瑣,在參考了 這篇blog後,覺得下面的這個解決方法不錯:

<

div>

<

a href

="">行內元素1

a>

<

a href

="">行內元素2

a>

<

a href

="">行內元素3

a>

<

a href

="">行內元素4

a>

div>

既然間隙是空白符造成的,去掉空白符就好了,這種方法可能不太優雅,不過在要求不太嚴格的情況下可以用一下。

現在皆大歡喜了:

簡述inline block的邊距問題及解決方法

當我們將乙個元素的display設定為inline block時,設定好各元素的寬高及顏色後,這個邊距就會詭異的出現了,即使你使用 margin 0 padding 0 也是無法消除的。charset utf 8 title type text css div style head div div ...

偷懶的代價

在正式測試之前,給開發制定各種模板和規範的時候,曾經想過給開發制定乙份統計規範,但最終因為那段時間事情太多,偷懶少寫了乙份統計規範文件,抱著僥倖的心理以為這本身應該是開發的設計工作,他們在實現功能之前應該會自己先編寫乙份規範或在頭腦裡形成乙個清晰的思路。可是,在iagw m部分的 提交統計部分的測試...

1481 偷懶的西西

高三數學作業總共有n道題目要寫 其實是抄 編號1.n,抄每道題所花時間不一樣,抄第i題要花a i 分鐘。由於西西還要準備noip,顯然不能成天做數學作業。所以西西決定只用不超過t分鐘時間抄這個,因此必然有空著的題。每道題要麼不寫,要麼抄完,不能寫一半。一段連續的空題稱為乙個空題段,它的長度就是所包含...