鉻和狩獵中的圓形按鈕中斷

爲了創建四捨五入的按鈕，我使用了三幅圖像：左圖像，右圖像和一條圖像。每個工作都很好，但在safari和鉻合適的圖像進入下一行，我不明白爲什麼會發生這種情況。所以有人請幫助我，這裏是html標記和它的CSS。鉻和狩獵中的圓形按鈕中斷

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
     body{width: 980px;margin: 0 auto} 
     .light_button a {background:url("images/center.png") repeat-x scroll 0 0 transparent;color:#000000;display:inline-block;font-size:16px;font-weight:bold;height:34px;line-height:29px;position:relative;text-align:center;text-decoration:none;} 
      .light_button .lout {background:url("images/left.png") no-repeat scroll 0 0 transparent;float:left;height:31px;left:-8px;position:absolute;width:8px;} 
      .light_button .rout {background:url("images/right.png") no-repeat scroll 0 0 transparent;float:right;height:31px;position:absolute;width:26px;} 


      .light_button a.light_right_nav_first {background:url("images/center.png") repeat-x scroll 0 0 transparent;color:#000;display:inline-block;font-size:16px;font-weight:bold;height:31px;line-height:29px;position:relative;text-align:center;text-decoration:none;} 
      .light_button a.light_right_nav_first .lout {background:url("images/p_left.png") no-repeat scroll 0 0 transparent;float:left;height:31px;left:-24px;position:absolute;width:24px;} 
      .light_button a.light_right_nav_first .rout {background:url("images/r_right.png") no-repeat scroll 0 0 transparent;float:right;height:31px;position:absolute;width:26px;} 




    </style> 
    </head> 
    <body> 

     <div class="light_button"> 
      <div class="left"> 
       <a class="nav_first" href="#"> 
        <span class="lout"></span> 
        home 
        <span class="rout"></span> 
       </a> 


      </div> 


      <div class="right"> 
       <a class="light_right_nav_first" href="#"> 
        <span class="lout"></span> 
        home 
        <span class="rout"></span> 
       </a> 


      </div> 
     </div> 



    </body> 
</html>

來源

2010-08-14 Soarabh

如果您需要圓角按鈕，爲什麼不嘗試'border-radius' CSS3屬性？它比你在這裏工作的方法更容易，也更簡單。 – 2010-08-14 05:38:58

是的，我知道，但正確的形象有兩個圖像的組合 – Soarabh 2010-08-14 05:57:13

不要合併float和絕對定位。在你的情況下，你可能想要刪除float並保留position:absolute。您已有left:-8px;width:8px爲.lout，您可以使用right屬性right:-26px;width:26px爲.rout做類似的操作。

此外，由於您的左右圖像將在實際鏈接之外，因此您應該考慮在鏈接中添加邊距，以便圖像不會重疊。

來源

2010-08-14 05:35:04 casablanca

仍然不工作:( – Soarabh 2010-08-14 05:57:28

嘿，我錯了，我在我的標記中犯了一個錯誤，否則你說的是正確的。 – Soarabh 2010-10-11 06:48:03

鉻和狩獵中的圓形按鈕中斷

回答

相關問題