CSS“底部”位置仅在 Firefox 中不起作用

【问题标题】：CSS 'bottom' position not working in Firefox onlyCSS“底部”位置仅在 Firefox 中不起作用
【发布时间】：2018-02-21 14:18:59
【问题描述】：

我正在尝试使用 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. 您的网站加载近 3MB。这是相当大的，我建议缩小你的资产，特别是你的背景图片，它单独超过 1.5MB（应该没有理由超过 250k）。 2. 随着时间的推移，内联样式很难维护，我强烈建议使用类/ID 并将样式放入样式表中。 3.&lt;br&gt;标签很臭。更改为&lt;p&gt; 标签并使用样式来获得所需的布局。 4.根据这个答案stackoverflow.com/questions/21440604/…问题是transform在父母身上。
  • 您链接到的小提琴在 Firefox 中工作。如果我把它放在小提琴中，您提供的代码不会显示任何内容（由于某种原因甚至没有损坏的图像图标）。您需要在问题本身中提供足够的代码来重现问题。链接到您的实时网站是不够的，因为一旦您解决问题，链接就会改变，并且不会对未来的访问者可见。
  • CSS - "position: fixed" acting like "absolute" in Firefox的可能重复
  • 谢谢，我一定会考虑最小化我的代码。我最近更改了背景并忘记缩小它。至于我提供的代码，我实际上并不想在这里包含它，但它让我提供了代码并且我遇到了格式问题并将其中的一些内容删掉了。一定是一路上搞砸了。我没有考虑其他人将来访问此页面，我一定会修复它。

标签： css firefox css-position


【解决方案1】：

如果我删除 .Normal 类上的 -moz-transform: scale(1);，它看起来就像在 FireFox 上的 Chrome 中一样：

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

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

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

【讨论】：

  • 这是一个欺骗。我建议投票，而不是回答。 span>
  • 谢谢！像魅力一样工作。没有意识到这一点感觉有点傻，但是我从某个地方借用了该代码，不确定它到底做了什么，并决定无论如何都要包含它。
  • 你可能就在那儿，但我还没有设法找到解决 Syllith 问题的提议的骗子的解决方案，而且他们的代码中似乎没有 backface-visibility我已经找到了。
猜你喜欢
  • 1970-01-01
  • 2017-12-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode