0

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>

</ p>

4

1 に答える 1

1

In your style delete this line

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

Demo : http://jsfiddle.net/vCAgs/3/

I have checked only in chrome and internet explorer 9, but I think it works in all browsers

于 2012-06-12T21:25:12.263 に答える