1. 程式人生 > >為您解惑:關於內層DIV設定margin-top不起作用的解決方案。。。

為您解惑:關於內層DIV設定margin-top不起作用的解決方案。。。

<span style="font-size:14px;">//程式碼如下:

<div>上層</div>

<div> <!--父層-->     

  <div style="margin-top:40px;">子層</div>

</div></span>

猿猿們理想中的效果是父層和上部層貼邊顯示,子層距離父層頂部有40px的距離,在ie中正常,但是在ff中卻出現問題,子層和父層貼邊了,而父層和上部層卻間隔了40px。

原因如下:

當兩個容器巢狀時,如果外層容器和內層容器之間沒有別的元素,firefox會把內層元素的margin-top作用與父元素。也就是說因為子層是父層的第一個非空子元素,所以使用margin-top會發生這個錯誤。

解決的方案有兩個:

1、使用浮動來解決,即將子層程式碼改為:<div style="margin-top:200px;float:left";>子層</div>

2、使用padding-top來解決,即:

<div style="padding-top:40px;">    

  <div>子層</div>

</div>


PS:猿猿們有其他的方法可以給我留言呦!

相關推薦

解惑關於DIV設定margin-top作用解決方案

<span style="font-size:14px;">//程式碼如下: <div>上層</div> <div> <!--父層-->   <div style="margin-top:40

關於DIV設定margin-top作用解決方案

關於內層DIV設定margin-top不起作用的解決方案 閱讀目錄 關於內層DIV設定margin-top不起作用的解決方案 回到頂部 關於內層DIV設定margin-top不起作用的解決方案 (一) 近日在做另外一個站點的時候,又遇到這個問題,決定好好的研究

微信小程式設定height 100% 作用解決辦法

https://blog.csdn.net/wshpwangshiyu/article/details/79744884 問題:微信小程式設定背景圖片高度適應整個螢幕,設定height 100% 不起作用? .container-all{ width: 100%; he

Qt 佈局設定stretch,作用解決方法

addWidget(QWidget *widget, int stretch = 0, Qt::Alignment alignment = Qt::Alignment()) insertStretch(int index, int stretch = 0) setStretchFactor(

解惑HTML5中使用MathML數學公式的簡單講解..........

HTML5 的 HTML 語法允許我們在文件內使用 <math>...</math> 標籤應用 MathML 元素。 部分MathML 元素如下: <mstyle>.........</mstyle>   用於設定其包裹的最終

解惑JSON的eval()和parse()方法以及stringfy()方法

JSON 最常見的用法之一,是從 web 伺服器上讀取 JSON 資料(作為檔案或作為 HttpRequest),將 JSON 資料轉換為 JavaScript 物件,然後在網頁中使用該資料。 為了更簡單地講解,下面使用字串作為輸入進行演示(而不是檔案)。 (1)把 JSO

解惑jQuery中$.getJSON( )的使用方法簡介之獲取JSON格式的資料.........

jQuery中的$.getJSON( )方法函式主要用來從伺服器載入json編碼的資料,它使用的是GET HTTP請求。 使用方法:$.getJSON( url [, data ] [, success(data, textStatus, XHR) ] ) url是必選引數

解決div設定margin-top使得父div也跟著向下移動

 之前在寫網頁的時候,發現一個小問題,就是子div設定margin-top的時候,父的div也會跟著向下移動。我用程式碼和圖描述一下問題: <style> *{margin:0;pad

相鄰div元素設定margin引起的層級問題解決方案

需求:up和down層,down層margin-top:-100px; 目的:down層覆蓋up層100px <div class="up"></div> <div class="down"></div> 出現問題:up

如何解決div設定margin-top時影響父divmargin-top

測試程式碼如下: <!DOCTYPE html> <html> <head><title></title><style type="text/css">.container{width: 50%;mar

微信小程式 navigator 設定 openType="switchTab"作用

最近剛開始學習小程式,官方文件不夠充分的元件說明導致了一些現象無法說清楚。就比如這個openType=”switchTab”, 我使用了一下這個,首先說明我的程式碼結構沒有完全按照官網結構,只是截取了footer的功能。 如圖: 就是有一個naviga

DIV設定margin-top影響父DIV位置

<pre name="code" class="html"><style type="text/css" media="screen"> *{margin: 0;padding: 0;} .pare{width: 600px;height:

Safari瀏覽器對設定的高度作用解決方案

發現 文字 one 底部對齊 設定 pan select標簽 pro prop 1、在做瀏覽器兼容的時候,發現select標簽在safari蘋果瀏覽器中的高度永遠都是默認的,這時候解決的辦法是加上line-height屬性就可以設置;2、但加上line-height屬性可以

ScrollView動態設定Margin能滑動解決方法

ScrollView的父佈局是ViewGroup,所有需要用ViewGroup來設定param,正確方式如下: 若設定margin後內容顯示不全,說明你設定的margin低於了你覆蓋文字的控制元件的高度 ViewGroup.MarginLayoutParams params= (View

mysql表中設定了default作用

我平時在設定表格時,例如設定成績預設值為0,但我傳入資料發現數據仍然為null;很是不理解 經過參考查詢得出一些小經驗,記錄一下 1、插入表中資料時,傳遞的引數為null或者“” 都不可以,他們會直接存入資料表中 2、方便的設定預設值是:在對應的實體類的屬性中直

解決vs中修改樣式表後作用的問題

快取,有好多,cpu和記憶體之間的三級快取,瀏覽器內的快取! 快取是因為速率不對等,通過快取來加速內容的顯示! 今天我在敲牛腩的時候遇到一個問題,找了半小時,才發現是快取導致的問題! 試著執行aspx檔

通過attr 動態設定CheckBox的checked屬性,會出現第二次設定cheked屬性作用的情況

                出現該問題時就要了解一下jquery利用attr、prop方法的區別在jquery中應該使用prop方法來獲取和設定checked屬性,不應該使用attr,需要的朋友可以參考下。1、prop方法獲取、設定checked屬性<input type="checkbox" na

通過attr(,)動態設定CheckBox的checked屬性,會出現第二次設定cheked屬性作用的情況

出現該問題時就要了解一下jquery利用attr、prop方法的區別 在jquery中應該使用prop方法來獲取和設定checked屬性,不應該使用attr,需要的朋友可以參考下。 1、prop方法獲取、設定checked屬性 <input type="che

怎樣解決在ie中table 的th td設定寬高度作用

因為專案之前整體風格都是用table做的所以遇到了th 或者td不能設定寬高度 首先如果不能設定寬度 比如<th style="width:200px;"></th> 這樣設定寬度,無論將寬度設為多大,在ie頁面都沒有一點反應。但谷歌介面是好的。 解

為什麼layer中彈出內容點選事件作用(動態渲染出的button無法點選)

  1.click只能為頁面現有的元素繫結點選事件,如果是動態生成的新的元素,是沒有事件的 2.而$(document).on("click","指定的元素",function(){});方法則是將指定的事件繫結在document上,而新產生的元素如果符合指定的元素,那就觸發此事件 &