好看的电视剧,盗墓笔记小说全集

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

常用12種CSS BUG解決方法與技巧

你是否遇到過(guò)CSS bug問(wèn)題，本文向大家介紹一下最常用的12種CSS BUG解決方法與技巧，CSS bug是布局中最頭疼的問(wèn)題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。

最常用的12種CSS BUG解決方法與技巧

CSS bug是布局中最頭疼的問(wèn)題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競(jìng)爭(zhēng)導(dǎo)致很多問(wèn)題的存在。而IE6與IE7在很多問(wèn)題上也存在著很大的差別。在大量的技術(shù)文檔中，也包含了這方面的內(nèi)容。輕松的解決CSS bug是我們必須掌握的技能。現(xiàn)在整理出最常用的12種CSSBUG解決方法以及CSSBUG類的小技巧。希望對(duì)您的學(xué)習(xí)、工作有所幫助，如果您依然有疑問(wèn)，歡迎您到查閱、搜索相關(guān)內(nèi)容。

一、針對(duì)瀏覽器的選擇器

這些選擇器在你需要針對(duì)某款瀏覽器進(jìn)行CSS設(shè)計(jì)時(shí)將非常有用.
　　IE6及其更低版本
　　*html{}
　　IE7及其更低版本
　　*:first-child+html{}*html{}
　　僅針對(duì)IE7
　　*:first-child+html{}
　　IE7和當(dāng)代瀏覽器
　　html>body{}
　　僅當(dāng)代瀏覽器(IE7不適用)
　　html>/**/body{}
　　Opera9及其更低版本
　　html:first-child{}
　　Safari
　　html[xmlns*=""]body:last-child{}
　　要使用這些選擇器,請(qǐng)將它們放在樣式之前.例如:

ExampleSourceCode

 
 
   
  
  #content-box{    
  
  width:300px;    
  
  height:150px;    
  
  }    
  
  ExampleSourceCode    
  
  *html#content-box{    
  
  width:250px;    
  
  }

二、讓IE6支持PNG透明

一個(gè)IE6的Bug引起了大麻煩,他不支持透明的PNG圖片。
　　你需要使用一個(gè)CSS濾鏡

ExampleSourceCode

 
 
   
  
  *html#image-style{    
  
  background-image:none;    
  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil    
  
  ename.png",sizingMethod="scale");    
  
  }

三、移除超鏈接的虛線

FireFox下,當(dāng)你點(diǎn)擊一個(gè)超鏈接時(shí)會(huì)在外圍出現(xiàn)一個(gè)虛線輪廓.這很容易解決,只需要在標(biāo)簽樣式中加入：本文由52CSS.com整理，轉(zhuǎn)載請(qǐng)注明出處！

ExampleSourceCode

 
 
   
  
  outline:none.    
  
  a{    
  
  outline:none;    
  
  }

#p#

四、給行內(nèi)元素定義寬度

如果你給一個(gè)行內(nèi)元素定義寬度,那么它只是在IE6下有效.所有的HTML元素要么是行內(nèi)元素要么就好是塊元素.行內(nèi)元素包括:,,和.塊元素包括

, 和
.你不能定義行內(nèi)元素的寬度,為了解決這個(gè)問(wèn)題你可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素.
ExampleSourceCode

span{width:150px;display:block}

五、讓固定寬度的頁(yè)面居中
為了讓頁(yè)面在瀏覽器居中顯示,需要相對(duì)定位外層div,然后把margin設(shè)置為auto.
ExampleSourceCode

#wrapper{

margin:auto;

position:relative;

}

六、IE6雙倍邊距的bug
給此對(duì)象加上display:inline即可解決問(wèn)題。具體介紹：
　　http://www.52CSS.com/article.asp?id=144
七、BoxModel盒模型bug的一般解決辦法
這是一個(gè)臭名昭著的問(wèn)題了，詳情參考這里：
　　http://www.52CSS.com/article.asp?id=106
八、兩個(gè)層之間的3px間隙
傳說(shuō)中的“IE3pxbug”，解決的辦法：
　　http://www.52CSS.com/article.asp?id=146
九、在IE中的HTML注釋引起文字奇怪的復(fù)制
DuplicateCharactersBug很神奇，具體的解決辦法：
　　http://www.52CSS.com/article.asp?id=440
十、圖片替換技術(shù)
用文字總比用圖片做標(biāo)題好一些.文字對(duì)屏幕閱讀機(jī)和SEO都是非常友好的.
ExampleSourceCode
HTML:

Mainheadingone span> h1>

CSS:

h1{background:url(heading-image.gif)no-repeat;}

h1span{

position:absolute;

text-indent:-5000px;

}

你可以看到我們對(duì)標(biāo)題使用了標(biāo)準(zhǔn)的
作為標(biāo)簽并且用CSS來(lái)將文本替換為圖片.text-indent屬性將文字推到了瀏覽器左邊5000px處,這樣對(duì)于瀏覽者來(lái)說(shuō)就看不見(jiàn)了，關(guān)掉CSS,然后看看頭部會(huì)是什么樣子的。#p#
十一、最小寬度
IE6另外一個(gè)bug就是它不支持min-width屬性.min-width又是相當(dāng)有用的,特別是對(duì)于彈性模板來(lái)說(shuō),它們有一個(gè)100%的寬度,min-width可以告訴瀏覽器何時(shí)就不要再壓縮寬度了.
除IE6以外所有的瀏覽器你只需要一個(gè)min-width:Xpx;例如:
ExampleSourceCode

.container{

min-width:300px;

}

為了讓他在IE6下工作,我們需要一些額外的工作.開始的時(shí)候我們需要?jiǎng)?chuàng)建兩個(gè)div,一個(gè)包含另一個(gè):
ExampleSourceCode

Content div>

div>

然后你需要定義外層div的min-width屬性，本文由52CSS.com整理，轉(zhuǎn)載請(qǐng)注明出處！
ExampleSourceCode

.container{

min-width:300px;

}

這時(shí)該是IEhack大顯身手的時(shí)候了.你需要包含如下的代碼:
ExampleSourceCode

*html.container{

border-right:300pxsolid#FFF;

}

*html.holder{

display:inline-block;

position:relative;

margin-right:-300px;

}

十二、隱藏水平滾動(dòng)條
為了避免出現(xiàn)水平滾動(dòng)條,在body里加入overflow-x:hidden.
ExampleSourceCode

body{overflow-x:hidden;}

當(dāng)你決定使用一個(gè)比瀏覽器窗口大的圖片或者flash時(shí),這個(gè)技巧將非常有用.
【編輯推薦】
四種方法輕松實(shí)現(xiàn)CSS隔行換色
提高CSS文件可維護(hù)、可讀性四大技巧
CSS3八大新功能閃亮登場(chǎng)
實(shí)用但不被IE支持的十大CSS屬性
CSS中id與class命名規(guī)則及編碼最佳習(xí)慣

責(zé)任編輯：佚名來(lái)源： 52css.com CSS

分享題目：常用12種CSS BUG解決方法與技巧
轉(zhuǎn)載來(lái)源：http://fisionsoft.com.cn/article/ccooijd.html

新聞中心

Mainheadingone span> h1>

其他資訊