吃奶呻吟张开双腿做受在线播放,久久久久久久波多野结衣高潮

Internet Explorer前端攻城師的的惡夢(mèng)，十個(gè)有九個(gè)前端人員都認(rèn)為他為禍人間不淺，本應(yīng)早點(diǎn)滅掉他，可是上天有好生之德，因而沒有滅之，在此情況下，前端的攻程師們將就將就過吧。前面在《瀏覽器兼容之旅第一站:如何在頁面中創(chuàng)建IE條件注釋》和《瀏覽器兼容之旅第二站:各瀏覽器的Hack寫法讓瀏覽器達(dá)到一致的渲染效果》中了解了一些處理兼容的基本方法。那么這節(jié)開始瀏覽器兼容之旅的第三站:IE常見Bug，在本節(jié)中，您可以了解IE中常見的Bugs，以及這些Bugs要如何去避免發(fā)生，或者發(fā)生了，我們將如何去解決他。大家有興趣嗎？有興趣的童鞋們就開始我們的旅行吧。

一、浮動(dòng)元素的雙倍Margin的Bug
浮動(dòng)元素的雙倍Margin的Bug是IE6以及其以下版本的一個(gè)經(jīng)典Bug了，觸發(fā)這個(gè)Bug的產(chǎn)生是給元素設(shè)置了float并且同時(shí)和float同一方向設(shè)置了margin值，此時(shí)在IE6(IE6以下版本我們飄過不理了)就會(huì)產(chǎn)一個(gè)雙倍margin值的Bug 。我們先來看一段代碼：

復(fù)制代碼代碼如下:
.demo {
background: #95cfef;
border: 1px solid #36f;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
}

效果

瀏覽器兼容之旅第三站:IE常見Bug總結(jié)及修復(fù)方法—part1

修復(fù)方法
修復(fù)這個(gè)立王Bug的方法很簡單，只需要改變浮動(dòng)元素的顯示風(fēng)格，也就是說在浮動(dòng)元素中增加一個(gè)display:inline屬性，這樣就可以輕松的解決浮動(dòng)元素的雙倍Margin的Bug 。下面是修改后的代碼：

復(fù)制代碼代碼如下:
.demo {
background: #95cfef;
border: 1px solid #36f;
display: inline;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
}

二、克服Box Model的Bug
Box Model的Bug常發(fā)生在同時(shí)給一個(gè)元素設(shè)置了寬度和高度的時(shí)候還設(shè)置了元素的padding或border值，此時(shí)將改變?cè)氐恼嬲笮?。換個(gè)形像一點(diǎn)的例子，我們進(jìn)行行一個(gè)960px的布局，里面左邊欄是220px的寬度，主內(nèi)容是720px的寬度，他們之間是20px的間距，此時(shí)設(shè)計(jì)需要在左邊欄有一個(gè)10px左右內(nèi)距，如果我們按下面的代碼寫就會(huì)產(chǎn)生一個(gè)Bug 。
Html markup

復(fù)制代碼代碼如下:
div id="wrap"
div id="left" left/div
div id="content" main/div
/div

CSS Code

復(fù)制代碼代碼如下:
#wrap {
width: 960px;
background: #66CCFF
}
#left {
background: #FFCC99;
float: left;
padding: 0 10px;
width: 220px;
}
#right {
background: #9933CC;
float: right;
width: 720px;
}

此時(shí)div#left將改變了其實(shí)際的寬度，我們來看下面的一個(gè)圖，上圖是沒有padding值時(shí)的div#left，而下圖是有padding的div#left:

這個(gè)Bug在所有瀏覽器都將存在，因?yàn)樵赿iv#left中padding值改變了最初的寬度220px，那么要克服這個(gè)Bug也不難，只需要在div#left內(nèi)部增加一個(gè)div，并把padding值移入到這個(gè)新增加的div中就行了。

復(fù)制代碼代碼如下:
div id="wrap"
div id="left"
divleft/div
/div
div id="content" main/div
/div

CSS Code

復(fù)制代碼代碼如下:
#wrap {
width: 960px;
background: #66CCFF
}
#left {
background: #FFCC99;
float: left;
width: 220px;
}
#left div {
padding: 0 10px;
}
#right {
background: #9933CC;
float: right;
width: 720px;
}

此例只說加了padding值，如果在div中加了border值，我們同樣需要把border值也移入到內(nèi)部的div中，這樣就可以輕松克服Box Model帶來的Bug 。當(dāng)然不增加額外標(biāo)簽也有一種辦法可以解決，就是重新計(jì)算寬度，但這種方法是治標(biāo)不治本，小生不提倡使用這種方法。