div設高度為1px實現分隔線的效果

2021-08-31 17:54:47 字數 810 閱讀 6783

設定高度為1px等超小高度在ie下不正常顯示的解決方案

根據div css網頁布局的需要,我們有時候需要設定容器的高度為1px。而設定後在ie中預覽,並不是所設定的樣子,好象容器被撐開了,達不到想要的最小高度。

其實這是ie的預設行高所引起的,解決的方法也有很多,下面我們例舉了overflow:hidden、line-heigh兩種方法

overflow:hidden實現最小高度

xml/html** ?

line-height實現最小高度

xml/html** ?

將字型大小設為高度大小

xml/html**

&nbps;

此方法來自:

div高度自適應-----css布局中最小高度(min-height)的妙用(相容ie,ff)

在用div+css排版頁面時,發現了如下問題:給乙個div加了高度之後,如果內容長度超過了div所定義的高度,在ie與傲遊中,div會自動下降;而在firefox(火狐)中,內容會溢位div,如果你的div加了邊框,你就會發現,在火狐中內容會溢位。如果你要寫乙個高度會隨內容變長而變長的 div且這個div有最小高度,那麼你就不得不想辦法解決它了。

如果你熟悉css,可能你會說,這不是小兒科的問題嗎?在css樣式表中不就有乙個min-height嗎?呵呵,如果你是乙個div工作者,你應該會在工作中發現ie與傲遊根本不支援這個樣式,而firefox支援這個樣式。

其實這個問題很好解決,假如你要定義乙個最小高度為600px的div,你可以這樣寫:

css**

則div在ie與firefox中都會有乙個最小高度,且高度會自適應內容的長度。

移動端1px實現

新增css 1px邊框時,在手機上顯示為粗線,解決辦法就是利用偽類設定1px邊框,然後根據裝置畫素比進行y軸的縮放,使其表現為真正的1px.stylus的語法 1.定義乙個函式。找到要加1px的標籤,新增定位和偽類。border 1px color position relative after d...

移動端1px邊框實現

一看上篇博文的發布日期,就知道自己好久沒有寫技術文章了。一是可能工作比較忙,二是可能自己也比較懶散啦。今天重新敲起鍵盤。來跟大家分享乙個最近新學到的技術。一是為鞏固自己的掌握程度。也希望能幫到有需要的同學。大神看到的話可以提點意見。幫助小弟更快的成長。好了正文從這開始 如何實現在移動裝置下1畫素的邊...

實現移動端1px邊框

最近學了一下vue的實戰課程,學習到了其中的乙個頁面設計技巧,覺得深有感觸,於是便寫個部落格記錄下來,以便下次查閱 專案中是通過vue stylus來實現的,那麼首先需要說一下實現原理,因為在移動端中物理畫素是裝置畫素的兩倍,那麼以平時在pc端中設計的1px 在移動端裝置中就是2px了,那麼,我們要...