中文字幕亚洲欧美一区_国产JIZZJIZZ免费看_亚洲av大码在线_亚洲黄色一级毛片_野花影视大全在线观看免费_欧美一区二区三区免费不卡_欧美日韩国产在线精品_国产福利盒子在线看片_精品国产人成在线_日韩欧美动漫一区在线

咨詢電話:024-31891684

網(wǎng)站建設(shè)|注冊(cè)|登錄 | 易勢(shì)大連分公司

沈陽做網(wǎng)站、沈陽建站易勢(shì)最專業(yè)!

 

build網(wǎng)站制作當(dāng)前位置:首頁>主要服務(wù)>網(wǎng)站制作

網(wǎng)站制作技術(shù)之margin出現(xiàn)的bug(常見的瀏覽器下)

IE6中雙邊距Bug
發(fā)生場(chǎng)合:當(dāng)給父元素內(nèi)第一個(gè)浮動(dòng)元素設(shè)置margin-left(元素float:left)或margin-right(元素float:right)時(shí)margin加倍。
解決方法:是給浮動(dòng)元素加上display:inline;CSS屬性;或者用padding-left代替margin-left。
原理分析:塊級(jí)對(duì)象默認(rèn)的display屬性值是block,當(dāng)設(shè)置了浮動(dòng)的同時(shí),還設(shè)置了它的外邊距就會(huì)出現(xiàn)這種情況。也許你會(huì)問:為什么之后的對(duì)象和第一個(gè)對(duì)象之間就不存在雙倍邊距的Bug”?因?yàn)楦?dòng)都有其相對(duì)應(yīng)的對(duì)象,只有相對(duì)于其父對(duì)象的浮動(dòng)對(duì)象才會(huì)出現(xiàn)這樣的問題。第一個(gè)對(duì)象是相對(duì)父對(duì)象的,而之后對(duì)象是相對(duì)第一個(gè)對(duì)象的,所以之后對(duì)象在設(shè)置后不會(huì)出現(xiàn)問題。為什么display:inline可以解決這個(gè)雙邊距bug,首先是inline元素或inline-block元素是不存在雙邊距問題的。然后,float:left等浮動(dòng)屬性可以讓inline元素haslayout,會(huì)讓inline元素表現(xiàn)得跟inline-block元素的特性一樣,支持高寬,垂直marginpadding等,所以div class的所有樣式可以用在這個(gè)display inline的元素上。

IE6中浮動(dòng)元素3px間隔Bug
發(fā)生場(chǎng)合:發(fā)生在一個(gè)元素浮動(dòng),然后一個(gè)不浮動(dòng)的元素自然上浮與之靠近會(huì)出現(xiàn)的3pxbug
解決方法:右邊元素也一起浮動(dòng);或者為右邊元素添加IE6 Hack _margin-left:-3px;從而消除3px間距。
原理分析:IE6瀏覽器缺陷Bug。

IE6/7負(fù)margin隱藏Bug
發(fā)生場(chǎng)合:當(dāng)給一個(gè)有hasLayout的父元素內(nèi)的非hasLayout元素設(shè)置負(fù)margin時(shí),超出父元素部分不可見。
解決方法:去掉父元素的hasLayout;或者賦hasLayout給子元素,并添加position:relative;
原理分析:IE6/7獨(dú)有的hasLayout產(chǎn)生問題。

IE6/7ul/ol標(biāo)記消失bug
發(fā)生場(chǎng)合:當(dāng)ul/ol觸發(fā)了haslayout并且是在ul/ol上寫margin-left,前面默認(rèn)的ul/ol標(biāo)記會(huì)消失。
解決方法:給li設(shè)置margin-left,而不是給ul/ol設(shè)置margin-left
原理分析:IE6/7瀏覽器Bug

IE6/7marginabsolute元素重疊bug
發(fā)生場(chǎng)合:雙欄自適應(yīng)布局中,左側(cè)元素absolute絕對(duì)定位,右側(cè)的margin撐開距離定位。在IE6/7下左側(cè)應(yīng)用了absolute屬性的塊級(jí)元素與右邊的自適應(yīng)的文字內(nèi)容重疊。
解決方法:把左側(cè)塊級(jí)元素更改為內(nèi)聯(lián)元素,比如把div更換為span。
原理分析:這是由于IE6/IE7瀏覽器將inline水平標(biāo)簽元素和block水平的標(biāo)簽元素沒有加以區(qū)分一視同仁渲染了。屬于IE6/7瀏覽器渲染Bug。

IE6/7/8auto margin居中bug
發(fā)生場(chǎng)合:給block元素設(shè)置margin auto無法居中
解決方法:出現(xiàn)這種bug的原因通常是沒有Doctype,然后觸發(fā)了iequirks mode,加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個(gè)width能夠解決,但根據(jù)本人親測(cè),加with此種方法是無效的,如果沒有Doctype即使給元素添加width也無法讓block元素居中。
原理分析:缺少Doctype聲明。

IE8input[button | submit] 設(shè)置margin:auto無法居中
發(fā)生場(chǎng)合:ie8下,如果給像button這樣的標(biāo)簽(如button input[type="button"] input[type="submit"])設(shè)置{ display: block; margin:0 auto; }如果不設(shè)置寬度的話無法居中。
解決方法:可以給為input加上寬度
原理分析:IE8瀏覽器Bug

IE8百分比padding垂直margin bug
發(fā)生場(chǎng)合:當(dāng)父元素設(shè)置了百分比的padding,子元素有垂直的margin的時(shí)候,就好像父元素被設(shè)置了margin一樣。
解決方法:給父元素加一個(gè)overflow:hidden/auto。
原理分析:IE8瀏覽器Bug。

 

上一條資訊|返回欄目頁|下一條資訊

易勢(shì)沈陽建站專業(yè)機(jī)構(gòu),以DIV+CSS為主,js/jQuery為輔,制作利于優(yōu)化,頁面美觀的優(yōu)質(zhì)網(wǎng)站!

top

網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)