西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)其它知識 → Div相互重疊、DIV錯(cuò)位的解決方案

Div相互重疊、DIV錯(cuò)位的解決方案

相關(guān)軟件相關(guān)文章發(fā)表評論 來源:西西整理時(shí)間:2012/6/3 9:55:54字體大小:A-A+

作者:佚名點(diǎn)擊:541次評論:0次標(biāo)簽: Div

  • 類型:源碼相關(guān)大小:11.3M語言:中文 評分:5.0
  • 標(biāo)簽:
立即下載

今天,在用不同的瀏覽器測試自己做的一個(gè)平臺(tái)時(shí),發(fā)現(xiàn)了一個(gè)比較詭異的問題。在IE下顯示正常的兩個(gè)DIV,在Chrome下竟然發(fā)生了錯(cuò)位。

在IE下顯示正常

Chrome下,錯(cuò)位了...

讓我們仔細(xì)看一下不和諧的現(xiàn)象

解決的思路:

1、百度一下(為什么不同的DIV會(huì)重疊)

2、用Chrome下的調(diào)試工具,發(fā)現(xiàn)問題

那些百度上的答案

雖然不能解決我的問題,但是這是一個(gè)解決DIV錯(cuò)位的方法,也貼出來

相關(guān)鏈接

自己動(dòng)手分析了

1、首先,讓我們用Chrome下的審查元素功能,快速定位一下出問題的地方,以便找出他的對應(yīng)的Css進(jìn)行分析。這個(gè)審查元素的功能還能夠很方便的幫我們辨認(rèn)出一個(gè)HTML控件占整個(gè)頁面的空間。

2、從上圖中看出了點(diǎn)端倪了吧?帶有國家、省、市的Div塊中理論上要有兩行,但是Chrome定位的大小卻只有一行。再看看對應(yīng)的Css

3、從控件塊的Css看,原來是Height被定死了。那么把HeightX2不就行了。但是,如果屏幕的分辨率又變一下,還是會(huì)錯(cuò)位啊。。那么采用相對布局吧?那么將絕對的高度改成Position:Reletive。再試試。。。

4、讓我們一起分享解決問題的喜悅吧?世界終于從混沌中分清了。。。

總結(jié):

1、chrome的審查元素是一個(gè)好功能,能夠幫我們快速定位元素的CSS。

2、IE很強(qiáng)大,能夠自動(dòng)解決布局重疊的問題。

3、界面中盡量用相對布局,以避免不同瀏覽器,不同分辨率顯示的差異。

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價(jià)!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)