這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)網(wǎng)頁前端開發(fā)小細(xì)節(jié)有哪些，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
1 select標(biāo)簽必須閉合
2 左右布局的時(shí)候可以讓一方浮動(dòng)，浮動(dòng)的一方設(shè)置width，另一方設(shè)置margin=float一方的width+實(shí)際的margin，如下所示：
.top .top_left{width:250px; float:left; height:500px;}
.top .top_right{height:500px; margin-left:260px;}
但是這樣在IE6下會(huì)出現(xiàn)3px bug，這時(shí)可以用hack，即*margin-left:257px;好的方法是讓.top_right也浮動(dòng)，這樣它會(huì)清理3px bug，也就是訂寬雙浮動(dòng)
3 如果容器的寬度設(shè)置的比內(nèi)容的寬度小，那么在現(xiàn)代瀏覽器中會(huì)正常顯示，超出的內(nèi)容還可以顯示，容器不會(huì)撐大，但是在IE6下就不是了，因?yàn)镮E6下的寬度是min-width，所以容器會(huì)被撐開，這樣基于這個(gè)容器的絕對(duì)相對(duì)定位以及margin等都會(huì)出現(xiàn)問題，解決方法是可以不對(duì)容器設(shè)置寬度或者設(shè)置的寬度大于或等于內(nèi)容的較大寬度
4 ! important 如下代碼：
#a{margin-left:30px!important; margin-left:20px;}
在上面的例子中， 層a 在IE6.0中， 左邊距為20像素， 而在Firefox中， 左邊距則變?yōu)?0像素。 這是因?yàn)椋?!important在 CSS 中表示優(yōu)先調(diào)用， 由于IE不能夠識(shí)別這個(gè)屬性， 所以在IE中， 只能夠調(diào)用 “margin-left:20px;" 這個(gè)選項(xiàng)， 所以同樣的一段代碼， 在Firefox和IE中就會(huì)顯示不同的樣式。
5 兼容性-------IE6/7下li元素的底部3px bug
在IE6、7下如果一個(gè)li包含了浮動(dòng)元素，那么這個(gè)li會(huì)多出3px的底部邊距，解決方法有兩種
一：給li添加float屬性，屬性值可以是除none外的任意值；
二：給li添加vertical-align屬性，屬性值可以是任意值
從解決問題的實(shí)質(zhì)上，這兩種方法并無區(qū)別，都是通過添加相應(yīng)的css屬性來激發(fā)li的haslayout，但是方法2更適合來解決這個(gè)問題，因?yàn)橐坏┙oli添加浮動(dòng)，那么勢(shì)必要清除之，這是個(gè)棘手的問題，雖然有很多方法可以來解決浮動(dòng)帶來的麻煩，但是無形中增加了代碼的負(fù)重，那是我們不想看到的，所以推薦使用方法2。
6 經(jīng)常遇到一個(gè)左右兩個(gè)div等高的布局，都設(shè)置了高度，但是其中一個(gè)div的高度在IE6中被撐開了，那是因?yàn)镮E6下設(shè)置高度相當(dāng)于最小高度，而ff下設(shè)置多少就是多少，所以IE6會(huì)撐開，解決的方法是給div加個(gè)overflow：hidden；
上述就是小編為大家分享的網(wǎng)頁前端開發(fā)小細(xì)節(jié)有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
