Question

此代码中的a）按钮和b）页脚有问题。

在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>

Answer 1

在你的风格中删除这一行

按钮：活性{位置：绝对的;顶部：100像素;左：50像素}

演示：http://jsfiddle.net/vCAgs/3/

我只检查过Chrome和Internet Explorer 9，但我认为它适用于所有浏览器

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

1 个答案: