CSS'底部'位置不适用于Firefox

时间:2017-09-13 02:29:46

标签: css firefox css-position

我正在尝试使用CSS将这些图标放置在我页面的左下角以对齐它们。它适用于除Firefox之外的所有浏览器。我尝试了很多东西,但无法让它发挥作用。您可以查看fiddle script,虽然它看起来很糟糕,但您可以看到图标实际上位于正确的位置。在Firefox中加载actual webpage时,您可以看到图标实际上位于页面中间。谁能告诉我发生了什么事?我尝试过多种方式重新排列代码并更改位置字段,但无济于事。感谢

<!DOCTYPE html>
<html lang="en">

<head>

<!--Blacklist-->
<?php
$file = file('blacklist.txt');
foreach ($file as $line)
{
    if ($_SERVER['REMOTE_ADDR'] == $line) {
        die;
    }
}
?>

<!--IP Logger-->
<?php
    if (getenv("REMOTE_ADDR") != "192.168.1.1")
    {
        $filename = "iplog.txt" ; 

        $file = file($filename); 
        $file = array_unique($file); 

        $fd = fopen ($filename , "r"); 
        $fstring = fread ($fd , filesize ($filename)) ; 
        fclose($fd); 
        $fd = fopen ($filename , "w"); 
        $fcounted = $fstring."\n".getenv("REMOTE_ADDR"); 
        $fout= fwrite ($fd , $fcounted );
        fclose($fd);
    }
?>

<!--Hit Counter-->
<?php
    if (getenv("REMOTE_ADDR") != "192.168.1.1")
    {
        $datei = fopen("counter.txt","r");
        $count = fgets($datei, 1000);
        fclose($datei);
        $count=$count + 1 ;
        $datei = fopen("counter.txt","w");
        fwrite($datei, $count);
        fclose($datei);
}
?>

<title>Endure Box</title>
<link rel="icon" type="image/ico" href="/images/favicon.ico">

<meta charset="UTF-8">

<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.interactive_bg.js"></script>

<script type="text/javascript" language="javascript" src="tooltip/tooltipscript.js"></script>
<link rel="stylesheet" href="tooltip/tooltipstyle.css" type="text/css" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--Disable Right Clicks-->
<script language="javascript">
    document.onmousedown = disableclick;
    function disableclick(event) 
    {
        if (event.button == 2) 
        {
            return false;
        }
    }
</script>

<!--View-->
<script type="text/javascript">
$(document).ready(function(){
    $('#Page').fadeIn(500).removeClass('hidden');
    resize();
});

window.onresize = function(event) {
    resize();
};

function resize(){
    if ($(window).width() < 800)
    {
        $("#Page").removeClass("Normal");
        $("#Page").addClass("Small");
        $("#IconBar").removeClass("Normal");
        $("#IconBar").addClass("Small");
    }

    if ($(window).width() > 800)
    {
        $("#Page").removeClass("Small");
        $("#Page").addClass("Normal");
        $("#IconBar").removeClass("Small");
        $("#IconBar").addClass("Normal");
    }
}
</script>

<!--Animations-->
<script type="text/javascript">
$(document).ready(function(){
        $("#Page").animate({opacity: 1}, 800);
        $("#IconBar").animate({opacity: 1}, 850);

        $("#hid").change(function() {
            if(document.getElementById("hid").value)
            {
                $('#Form').fadeIn(500).removeClass('hidden');
                $('#upload_button').removeClass('hidden');
                $("#upload_button").animate({opacity: 1}, 400);
            }
            else
            {
                $('#Form').fadeOut(500).addClass('hidden');
                $('#upload_button').addClass('hidden');
                $("#upload_button").animate({opacity: 0}, 0);
            }
         });  

        $(".Box").mouseover(function(){
            $(this).stop().animate({opacity: .95, height: 235, width: 235}, 150);
            $("#OpenText").stop().animate({opacity: .85}, 400);
        });
        $(".Box").mouseout(function(){
            $(this).stop().animate({opacity: .85, height: 220, width: 220}, 150);
            $("#OpenText").stop().animate({opacity: 0}, 400);
        });

        $(".Icons").hover(function(){
            $(this).animate({opacity: 1, height: 35, width: 35}, 100);
        }, function(){
            $(this).animate({opacity: .95, height: 32, width: 32}, 100);
        });
    });

function uploadstatus(uploading){
        if (uploading)
        {
            $("#choosefile").addClass("hidden");
            $("#Loading").removeClass("hidden");
            $("#upload_button").addClass("hidden");
            $("#upload_button").animate({opacity: 1}, 350);
            $("#Form").animate({opacity: 0}, 0);
        }
        else
        {
            $("#Loading").addClass("hidden");
            $("#upload_button").animate({opacity: 0}, 0);
            $("#upload_button").removeClass("hidden");
            $("#choosefile").removeClass("hidden");
        }
    }
</script>

<!--Body-->
<body oncontextmenu="return false">

<!--Input Parser-->
<script language="javascript">
String.prototype.ucfirst = function()
{
    return this.charAt(0).toUpperCase() + this.substr(1);
}

$("document").ready(function(){ 
    $("#hid").change(function() {
        <!--Get File Name-->
        var path = document.getElementById("hid").value;
        var fileName = "" + path.match(/[^\/\\]+$/);

        <!--Get Title-->
        var titlelength = fileName.indexOf('.');
        var truncatedtitle = fileName.substring(0, titlelength).ucfirst();;
        document.getElementById('Title').value = truncatedtitle;
    });  
});
</script>

<!--Cleanup-->
<script language="javascript">
$("document").ready(function(){
    $("#hid").change(function() {
        if (document.getElementById("SuccessText") || document.getElementById("ErrorText") || document.getElementById("NameText"))
        {
            if (document.getElementById('SuccessText'))
            {
                var SuccessText = document.getElementById('SuccessText');
                SuccessText.parentNode.removeChild(SuccessText);
            }

            if (document.getElementById('NameText'))
            {
                var NameText = document.getElementById('NameText');
                NameText.parentNode.removeChild(NameText);
            }

            if (document.getElementById('ErrorText'))
            {
                var ErrorText = document.getElementById('ErrorText');
                ErrorText.parentNode.removeChild(ErrorText);
            }   
        }
    });  
});
</script>       

<!--Body-->
<div class="bg" data-ibg-bg="/images/background.jpg">

<div class="display" id="Page" style="opacity:0;" align="center">
</br></br></br>
<img src="/images/logo.png">
</br></br></br>
<a href="/contents/public/"><img style="opacity:.8;cursor:default" src="/images/box.png" class="Box" id="Box"></a>
</br></br>
<p class="OpenText" id="OpenText" style="opacity:0;cursor:default">Open the box</p>
</br>


<!--Form-->
<form action="index.php" method="post" enctype="multipart/form-data">

<div id="choosefile">
<div id="doit">
<img src="images/choose_file.png"/>
</div>

<input id="hid" name="file" type="file" size=1></div>
</br>
<img src="images/loading.gif" id="Loading" class="hidden" width="85" height="85">

<div class="FormText hidden" id="Form" style="cursor:default">

File Name:
</br>
<input class="InfoText" type="text" id="Title" name="Title" value="" size="30">
</br></br>
Private:
</br>
<select class="InfoText" id="Private" name="Private" style="width:150px">
  <option value="Public">Public</option>
  <option value="Private">Private</option>
</select>
</br></br>
<input type="image" src="/images/upload_button.png" id="upload_button" value="Submit" class="hotspot hidden" onmouseover="tooltip.show('Your IP is <?php echo getenv(REMOTE_ADDR); ?>');" onmouseout="tooltip.hide();" onclick="uploadstatus(true);"/> 
</br>
</div>
</form>

<!--Upload-->
<?php

if ($_POST)
    {           
if (strpos(($_FILES["file"]["name"]), 'php') == TRUE || strpos(($_FILES["file"]["name"]), 'jsp') == TRUE)
        {
            echo "<p class='ErrorText' id='ErrorText'>Filetype Banned!</p>";            
        }
        else
        {
        $path = $_FILES['file']['name'];
        $ext = pathinfo($path, PATHINFO_EXTENSION);

        if ($_POST['Private'] == "Private")
            {
                if (!file_exists('contents/private/' . getenv(REMOTE_ADDR)))
                {
                    mkdir('contents/private/' . getenv(REMOTE_ADDR), 0777, true);
                }
                    $folder = "contents/private/" . getenv(REMOTE_ADDR);
            }
        else
        {
            $folder = "contents/public/";
        }

        $temp = explode(".", $_FILES["file"]["name"]);
        $newfilename = $_POST['Title'] . '.' . end($temp);
        move_uploaded_file($_FILES["file"]["tmp_name"], $folder . '/' . $newfilename);
        $uploadStatus = true;
        }
    }

if ($uploadStatus)
    {
        if ($_FILES["file"]["error"] > 0)
            {
                echo "<p class='ErrorText' id='ErrorText'>Upload Failed!</p>";

                if ($_FILES["file"]["error"] == 1)
                    {
                        echo "<p class='ErrorText' id='ErrorText'>File exceeds PHP upload limit (4 GB)</p>";
                    }
                else if ($_FILES["file"]["error"] == 2)
                    {
                        echo "<p class='ErrorText' id='ErrorText'>File exceeds HTML upload limit (4 GB)</p>";
                    }
                else if ($_FILES["file"]["error"] == 3)
                    {
                        echo "<p class='ErrorText' id='ErrorText'>The file was only partially uploaded (network interruption?)</p>";
                    }
                else if ($_FILES["file"]["error"] == 4)
                    {
                        echo "<p class='ErrorText' id='ErrorText'>No file was selected!</p>";
                    }
                else if ($_FILES["file"]["error"] == 6)
                    {
                        echo "<p class='ErrorText' id='ErrorText'>The temporary folder is missing! Contact administrator!</p>";
                    }
                else if ($_FILES["file"]["error"] == 7)
                    {
                        echo "<p class='ErrorText' id='ErrorText'>Failed to write file to disk (Permission error?)</p>";
                    }
                else if ($_FILES["file"]["error"] == 8)
                    {
                        echo "<p class='ErrorText' id='ErrorText'>A PHP extension has stopped the upload!</p>";
                    }
            }
        else
            {
                echo '<script type="text/javascript">', 'uploadstatus(false); ', '</script>';

                echo "<p class='SuccessText' id='SuccessText'>Upload Successful!</p>";          

                echo "<p class='FileText' id='NameText'>" . $_FILES["file"]["name"] ." uploaded!</p></br>";

                $ipLog="uploadlog.txt";
                $friendly_name = $_FILES["file"]["name"];
                $file_size = $_FILES["file"]["size"] / 1024 / 1024 . " MB";
                $register_globals = (bool) ini_get('register_gobals'); 
                $ip = getenv(REMOTE_ADDR);
                $date = date ('m-d-Y H:i:s');
                $log = fopen("$ipLog", "a+"); 

                if (preg_match("/\bhtm\b/i", $ipLog) || preg_match("/\bhtml\b/i", $ipLog))  
                    { 
                        fputs($log, "File: $friendly_name | Size: $file_size | IP Address: $ip | Date Uploaded: $date <br>"); 
                    } 
                    else
                    {
                        fputs($log, "File: $friendly_name | Size: $file_size | IP Address: $ip | Date Uploaded: $date \n"); 
                    }

                fclose($log);

                $uploadStatus = false;
        }
    }
?>

</div>



</div>

<!--Background Resize Manager-->
<script type="text/javascript">
    $(".bg").interactive_bg();
    $(window).resize(function(){$(".bg > .ibg-bg").css({width: $(window).outerWidth(),height: $(window).outerHeight()})})
</script>

</body>
<!--Icons-->
<div id="IconBar" style="opacity:0;">

<img src="/images/info.png" class="hotspot Icons" onmouseover="tooltip.show('We respect your privacy, but we do not hold any responsibilty for any damages uploaded to the box. If there is an issue with any content, including personal and copyright complaints, please feel free to email me for corrections.');" onmouseout="tooltip.hide();"; 

style="position:fixed; 
float:left; 
left:12px; 
bottom:6px;
z-index:1;">

<a href="/contents/private/index.php?dir=<?php echo getenv(REMOTE_ADDR); ?>"><img src="/images/lock.png" class="hotspot Icons" onmouseover="tooltip.show('View your private files assciated with: <?php echo getenv(REMOTE_ADDR); ?>');" onmouseout="tooltip.hide();";

style="position:fixed; 
float:left; 
left:54px; 
bottom:6px;
z-index:1;">
</a>

<a href="http://box.endurehosting.com/printscreensharp/PrintScreen%23.exe"><img src="/images/printscreensharp.png" class="hotspot Icons"  onmouseover="tooltip.show('Download the latest version of PrintScreen#, the automatic screensnapper');" onmouseout="tooltip.hide();";

style="position:fixed; 
float:left; 
left:96px; 
bottom:6px;
z-index:1;">
</a>

<a href="http://helpdesk.endurehosting.com/"><img src="/images/email.png" class="hotspot Icons"  onmouseover="tooltip.show('If you have any suggestions, questions, or comments, feel free to shoot me an email at Kinlough@EndureMail.com or use our helpdesk');" onmouseout="tooltip.hide();";

style="position:fixed; 
float:left; 
left:138px; 
bottom:6px;
z-index:1;">
</a>

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BQLLXSL2AMZS8"><img src="/images/donate.png" class="hotspot Icons"  onmouseover="tooltip.show('Buy me a coffee!');" onmouseout="tooltip.hide();";

style="position:fixed; 
float:left; 
left:180px; 
bottom:6px;
z-index:1;">
</a>

</div>
</html>

1 个答案:

答案 0 :(得分:1)

如果我删除了-moz-transform: scale(1);课程中的.Normal,它就像在FireFox上的Chrome中一样:

.Normal {
    zoom: 1;
    /*-moz-transform: scale(1);*/
}

该行可在文件中找到:http://box.endurehosting.com/css/style.css

更新了小提琴:http://jsfiddle.net/uw8f9/2326/