在Chrome和Firefox中正確渲染，但在Safari或IE中無法正常渲染

在此代碼中出現a）按鈕和b）頁腳出現問題。在Chrome和Firefox中正確渲染，但在Safari或IE中無法正常渲染

在Firefox/IE中，按鈕無法正常工作，頁腳縮小並被扔到角落。

按下時，按鈕會切換到頁面的不同部分，並且頁腳不可讀。

任何幫助，將不勝感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 
    <title>SAMPLE</title> 
</head> 

<style type="text/css"> 

.con {text-align:center; } 

button a {text-decoration:none; color:#08233e; } 

#wtf_title {font-family: "Garamond"; font-weight: bold; font-size: 200%; padding-top:50px;} 

#intro_text {font-family: "Helvetica", serif; color: black; padding-top:10px; font-style: italic;} 

#reason {font-family: "Helvetica", serif; color: white; padding-top:50px; padding-bottom:50px;} 

#credit {font-family: "helvetica"; font-size: 20%; color: black; text-align:center; } 

button{ 
color:#08233e; 
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
font-size:70%; 
padding:14px; 
background:url(overlay.png) repeat-x center #ffcc00; 
background-color:rgba(255,204,0,1); 
border:1px solid #ffcc00; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
border-radius:10px; 
border-bottom:1px solid #9f9f9f; 
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
cursor:pointer; 
} 

button:hover{background-color:rgba(255,204,0,0.8);} 

button:active{position:absolute;top:100px; left:50px} 

</style> 

<body> 

    <div class="con"> 
     <p id="wtf_title">SAMPLE</p> 
     <hr noshade size=8 width="53%"> 
     <p id="intro_text">SAMPLE</p> 
     <button><a href="WTFLBJ_Hate.html" class="button1">SAMPLE</a></button><br> 
     <button><a href="WTFLBJ_Defend.html" class="button2">SAMPLE</a></button>    
    </div> 

    <div id="twitter-share-button"; style="position: absolute; top: 2px;" > 
     <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.whatthefuckhaslebronjamesdone.com" data-text="Check this out:" data-count="none" data-hashtags="WTFLBJ">Tweet</a> 
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
    </div> 

    <div id="fb_share"; style="position: absolute; top: 2px; left: 90px;" > 
     <a name="fb_share"></a> 
      <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
     type="text/javascript"> 
      </script> 
    </div> 


    <div id="credit"; style="position: absolute; bottom: 5px; " > 
     This site was created by <a href="http://www.twitter.com/varunsshetty">Varun Shetty</a> and <a href="http://www.twitter.com/bcfromblo">Bobby Corp</a>. Inspired by LBJ and <a href="http://www.whatthefuckhasobamadonesofar.com">WTF Obama</a>. 
    </div>

來源

2012-06-12 Varun Shetty

你的問題還不清楚，但與你的避風港」開始t關閉了您的和標記。 – pacman

它們在實際文本中被關閉;所以這不是問題。讓我嘗試更多地解釋這個問題。點擊按鈕時，按鈕會在Firefox中移動到頁面的另一部分（它們不會在Chrome或Safari中執行此操作）。而且Firefox的頁腳格式也是如此。 –