Facebook 로그인 버튼이 왜곡되었습니다.

Question

내 웹 사이트에 Facebook 등록을 구현했습니다. 갑자기 버튼이 왜곡되어 렌더링된다는 점을 제외하고는 모두 잘 작동합니다. 나는 웹 사이트를 로컬에서 테스트하고있다.

이 HTML 코드이다

echo '<ul id="login_menu"> 
<li id="login_button"><a>Login</a></li> 
<li class="register_button"><a href="register.php">Register</a></li> 
<li> <fb:login-button registration-url="registerwithfb.php" /> 
</li> 
</ul>'; 

스크립트 :

<div id="fb-root"></div> 

    <script type="text/javascript"> 
     window.fbAsyncInit = function() { 
     FB.init({ 
       appId : '<?php echo $facebook->getAppId(); ?>', 
       session : <?php echo json_encode($session); ?>, // don't refetch the  session when PHP already has it 
       status : true, // check login status 
       cookie : true, // enable cookies to allow the server to access the session 
       xfbml : true // parse XFBML 
     }); 

     // whenever the user logs in, we refresh the page 
     FB.Event.subscribe('auth.login', function() { 
       window.location.reload(); 
     }); 
}; 

(function() { 
     var e = document.createElement('script'); 
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
     e.async = true; 
     document.getElementById('fb-root').appendChild(e); 
}()); 

및 CSS :

#login_menu{ 
float:right; 
} 
#login_menu li{ 
margin:0; 
padding:0; 
float:left; 
    position:relative; 
    } 

    #login_menu li a{ 
    text-decoration:none; 
    list-style:none; 
    line-height:50px; 
    text-decoration:none; 
    height:55px; 
    font-weight:900; 
    font-size:13px; 
    border-right: 1px solid #555; 
    padding: 0 15px; 
    color:#59b1da; 
    } 
#login_menu li a:hover{ 
    color:#ffffff; 

    } 

어떤 IDE 에이?

감사

Answer 1

주석으로 #login_menu 리튬이 방해되었을 수로

. 다행히 도울 수있어.