CSS中定義超鏈接背景圖片的一些問(wèn)題
			
          
 			Posted on 2006-10-11 14:08 太清劍客 閱讀(5640) 評(píng)論(2)  編輯  收藏  所屬分類(lèi): XHTML|CSS 
			
			


		
          
		
          ?今天在定義超鏈接變換a:hover時(shí)碰到一些問(wèn)題，主要是關(guān)于圖片大小顯示不正常。
          ?比如定義了一個(gè)CSS樣式：???

          ?1<style>
          ?2#Main
          ?3{
          ?4width:300px;
          ?5height:300px;
          ?6}
          ?7#Main?a
          ?8{
          ?9color:?#006400;
          10}
          11#Main?a:hover
          12{
          13color:?Red;
          14background:?url(images/botton.gif)?no-repeat?center;
          15}
          16</style>
          但是發(fā)現(xiàn)定義了沒(méi)什么用，因?yàn)閳D片太大了（60*28px），圖片只顯示了其中一角，然后試著用定義a元素的width和height來(lái)解決，發(fā)現(xiàn)沒(méi)什么用。
          研究了老半天，終于發(fā)現(xiàn)可以用內(nèi)補(bǔ)丁padding解決，只要定義一下a,a:hover的padding就可以了，不過(guò)發(fā)現(xiàn)IE中，a元素padding的top和bottom屬性是不會(huì)自動(dòng)把div給“撐大”的，firefox正常，所以，為了兼容IE，需要在層定義中加入height，就像上面的height:300px;
          最后代碼如下：
          <style>
          #Main
          {
          width          :?300px;
          height          :300px;
          }
          #Main?a
          {
          color          :?#006400;
          padding          :?10px?8px;/*可以有4個(gè)參數(shù)，表示上右下左延長(zhǎng)的距離*/
          }
          #Main?a:hover
          {
          color          :?Red;
          background          :?url(/images/botton.gif)?no-repeat?center;/*圖片路徑*/
          padding          :?10px?8px;/*上下延長(zhǎng)距離10px，左右延長(zhǎng)距離8px*/
          }
          </style>
          其中的距離可以根據(jù)圖像大小和具體情況變動(dòng)。
          
	
          


          
	    
    

          Feedback
          
	
			
          
				
          
					
          
						# re: CSS中定義超鏈接背景圖片的一些問(wèn)題  回復(fù)  更多評(píng)論
						  
					
          
					2008-04-04 23:27 by Hmily
				
          
				
          一般都是把<a>放入到<ul><li><a href="">ddd</a></li></ul>

          而li的寬度是可以控制的。
          
			
          
		
			
          
				
          
					
          
						# re: CSS中定義超鏈接背景圖片的一些問(wèn)題  回復(fù)  更多評(píng)論
						  
					
          
					2009-03-21 11:17 by 小沈
				
          
				
          

          我也碰到了這種情況

          

          a:

          {

                display:block;

          }

          
			
          
		




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
		
		
          
		
          
			


		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
          
	
	
	

          
	
          
posts - 10, comments - 4, trackbacks - 0, articles - 0
          
	
          Copyright © 太清劍客
          

          

          

    







          
        
	




主站蜘蛛池模板：
五寨县|
通榆县|
宜良县|
大足县|
延津县|
凉城县|
康马县|
陆丰市|
新乡市|
沂源县|
澎湖县|
株洲县|
舞钢市|
北票市|
墨竹工卡县|
布拖县|
九江市|
恩平市|
芮城县|
沂水县|
黔东|
浦东新区|
潼南县|
新竹县|
盘锦市|
潍坊市|
龙州县|
余庆县|
大姚县|
兰州市|
玉树县|
垣曲县|
黔东|
墨脱县|
四会市|
舞阳县|
慈溪市|
兴隆县|
江油市|
长沙市|
峨山|