6.13日音訊,csshack和兼容的解決方案。在網(wǎng)頁制作中，兼容問題是一個基礎(chǔ)問題，又是一個讓人頭疼的問題，因為總有一些小的不兼容的出現(xiàn)，當(dāng)然了，這也是考驗我們基礎(chǔ)知識的學(xué)習(xí)和實踐能力的一個標(biāo)準(zhǔn)，如果用hack卻可以解決這些問題，但
邯鄲網(wǎng)站建設(shè)小編還是勸大家，能不用hack就不要用，必須要用的也要少量使用，切忌大范圍去使用。
針對瀏覽器的選擇器
這些選擇器在你需要針對某款瀏覽器進(jìn)行css設(shè)計時將非常有用.
IE6及其更低版本
*html{}
IE7及其更低版本
*:first-child+html{}*html{}
僅針對IE7
*:first-child+html{}
IE7和當(dāng)代瀏覽器
html>body{}
僅當(dāng)代瀏覽器(IE7不適用)
html>/**/body{}
Opera9及其更低版本
html:first-child{}
Safari
html[xmlns*=""]body:last-child{}
要使用這些選擇器,請將它們放在樣式之前.例如:
#content-box{
width:300px;
height:150px;
}
*html
#content-box{
width:250px;
}/*overridestheabovestyleandchangesthewidthto250pxinIE6andbelow*/
三.讓IE6支持PNG透明
一個IE6的Bug引起了大麻煩,他不支持透明的PNG圖片.
你需要使用一個css濾鏡
*html#image-style{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png",sizingMethod="scale");
}
四.移除超鏈接的虛線(僅對FF有效)
FireFox下,當(dāng)你點擊一個超鏈接時會在外圍出現(xiàn)一個虛線輪廓.這很容易解決,只需要在標(biāo)簽樣式中加入outline:none.
a{
outline:none;
}
五.給行內(nèi)元素定義寬度
如果你給一個行內(nèi)元素定義寬度,那么它只是在IE6下有效.所有的HTML元素要么是行內(nèi)元素要么就好是塊元素.行內(nèi)元素包括:<span>,<a>,<strong>和<em>.塊元素包括<div>,<p>,<h1>,<form>和<li>.你不能定義行內(nèi)元素的寬度,為了解決這個問題你可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素.
span{width:150px;display:block}
六.讓固定寬度的頁面居中
為了讓頁面在瀏覽器居中顯示,需要相對定位外層div,然后把margin設(shè)置為auto.
#wrapper{
margin:auto;
position:relative;
}
七.圖片替換技術(shù)
用文字總比用圖片做標(biāo)題好一些.文字對屏幕閱讀機(jī)和SEO都是非常友好的.
HTML:
<h1><span>artdesignsale.com</span></h1>
CSS:
h1{background:url(heading-image.gif)no-repeat;}
h1span{
position:absolute;
text-indent:-5000px;
}
你可以看到我們對標(biāo)題使用了標(biāo)準(zhǔn)的<h1>作為標(biāo)簽并且用css來將文本替換為圖片.text-indent屬性將文字推到了瀏覽器左邊5000px處,這樣對于瀏覽者來說就看不見了.
關(guān)掉css,然后看看頭部會是什么樣子的.
八.最小寬度
IE6另外一個bug就是它不支持min-width屬性.min-width又是相當(dāng)有用的,特別是對于彈性模板來說,它們有一個100%的寬度,min-width可以告訴瀏覽器何時就不要再壓縮寬度了.
除IE6以外所有的瀏覽器你只需要一個min-width:Xpx;例如:
.container{
min-width:300px;
}
為了讓他在IE6下工作,我們需要一些額外的工作.開始的時候我們需要創(chuàng)建兩個div,一個包含另一個:
<divclass="container">
<divclass="holder">Content</div>
</div>
然后你需要定義外層div的min-width屬性
.container{
min-width:300px;
}
這時該是IEhack大顯身手的時候了.你需要包含如下的代碼:
*html.container{
border-right:300pxsolid#FFF;
}
*html.holder{
display:inline-block;
position:relative;
margin-right:-300px;
}
Asthebrowserwindowisresizedtheouterdivwidthreducestosuituntilitshrinkstotheborderwidth,atwhichpointitwillnotshrinkanyfurther.Theholderdivfollowssuitandalsostopsshrinking.Theouterdivborderwidthbecomestheminimumwidthoftheinnerdiv.
九.隱藏水平滾動條
為了避免出現(xiàn)水平滾動條,在body里加入overflow-x:hidden.
body{overflow-x:hidden;}
當(dāng)你決定使用一個比瀏覽器窗口大的圖片或者flash時,這個技巧將非常有用。至于在現(xiàn)實的運用中，我們也見到了沒有hack的網(wǎng)頁，而且是各個瀏覽器都兼容，我們不僅要問了，是怎么回事呢，其實說的簡單些，那是因為經(jīng)驗豐富了，其實說的小一點，每個瀏覽器都有不同的默認(rèn)標(biāo)準(zhǔn)，我們只要把這些掌握了，也就把兼容問題解決了，這當(dāng)然需要不斷的實踐和多年的工作經(jīng)驗才能得出來。
