HTML5 <button> 在 Firefox 中不起作用，但在 I.E 中起作用

Question

这是一个非常令人沮丧的问题......我制作了一个带有 CSS3 样式的 HTML5 按钮 - 这个按钮在 I.E 中(功能上)有效，但是当我在 Firefox(v 16.0.2)中打开我的页面时，按钮不起作用(例如你不能点击它 - 它什么都不做)。更奇怪的是，我放了一个标准的 href 链接只是为了测试(在同一页上，按钮旁边)，我什至无法点击它(例如它什么都不做)。我已经在 I.E 9 和 FireFox 16.0.2 的两台不同机器上测试了这个页面。

这是我的按钮的 HTML 代码:

<p><button type="button" onClick="location.href='index.php'" class="navigationButton">Back to World Map</button> 

<!-- test link -->
<a href="index.php">home</a></p>

还有 CSS:

.navigationButton {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #ffffff;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #86eb86 0%,
        #013006);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#86eb86),
        to(#013006));
    background: -ms-linear-gradient(#86eb86, #013006);
    background: -o-linear-gradient(#86eb86, #013006);
    background: linear-gradient(#86eb86, #013006);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86eb86', endColorstr='#013006');

    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border: 3px solid #171717;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 10px rgba(087,087,087,0.7);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 10px rgba(087,087,087,0.7);
    box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 10px rgba(087,087,087,0.7);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.4),
        0px 1px 0px rgba(255,255,255,0.3);
}

如果我对这个按钮的实现适用于任何其他人(在 IE 和 Firefox 中)，请告诉我 - 否则如果我做错了什么，也让我知道并给出解释。

干杯!

编辑: 这是其中一个页面的完整代码。由PHP/MySQL动态生成...

<?php

require_once("includes/dbconnect.php");

$title = "";
$regionName = "";
$mapScript = "";
$mapDivStyle = "";
$pageDimensions = "";
$footerMargin = "";

function numberFormat($item){

    return number_format($item, 0, '.', ',');
}

if(isset($_GET['region'])){
 $region = htmlentities($_GET['region']);

 if($region == "northAmerica")
 {
     $regionName = "North America";
     $title = $regionName . ' | WorldTravel Tourism App';
     $mapScript = "js/northAmerica.js";
     $mapDivStyle = " style=\"width: 800px; height: 707px; margin-bottom:20px;\"";
     $pageDimensions = " style=\"width: 960px; height: 1050px;\"";
     $footerMargin = " style=\"margin-top:1159px;\"";
 }
 else if($region == "southAmerica")
 {
     $regionName = "South America";
     $title = $regionName . " | WorldTravel Tourism App";
     $mapScript = "js/southAmerica.js";
     $mapDivStyle = " style=\"width: 800px; height: 668px; margin-bottom:20px;\"";
     $pageDimensions = " style=\"width: 960px; height: 950px;\"";
     $footerMargin = " style=\"margin-top:1059px;\"";
 }
 else if($region == "eurasia")
 {
     $regionName = 'Eurasia';
     $title = $regionName . " | WorldTravel Tourism App";
     $mapScript = "js/eurasia.js";
     $mapDivStyle = " style=\"width: 800px; height: 415px; margin-bottom:20px;\"";
     $pageDimensions = " style=\"width: 960px; height: 900px;\"";
     $footerMargin = " style=\"margin-top:1009px;\"";
 }
 else if($region == "africaMiddleEast")
 {
     $regionName = "Africa and the Middle East";
     $title = $regionName . " | WorldTravel Tourism App";
     $mapScript = "js/africaMiddleEast.js";
     $mapDivStyle = " style=\"width: 800px; height: 799px; margin-bottom:20px;\"";
     $pageDimensions = " style=\"width: 960px; height: 1150px;\"";
     $footerMargin = " style=\"margin-top:1259px;\"";
 }
 else if($region == "oceania")
 {
     $regionName = 'Oceania';
     $title = $regionName . " | WorldTravel Tourism App";
     $mapScript = "js/oceania.js";
     $mapDivStyle = " style=\"width: 738px; height: 527px; margin-bottom:20px;\"";
     $pageDimensions = " style=\"width: 960px; height: 800px;\"";
     $footerMargin = " style=\"margin-top:859px;\"";

 }
 else{
     $invalidRegion = $region;
     $title = "Region not found | WorldTravel Tourism App";
 }
}
else{
    header("Location: index.php");
}
?>
<!DOCTYPE HTML>
<html>
    <head>
        <title><?php echo($title); ?></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script type="text/javascript" src="Scripts/swfobject.js"></script>
        <script type="text/javascript" src="<?php echo ($mapScript) ?>"></script>
    </head>

    <body>

        <div class="container">

          <header class="header">
          <p style="margin-left:-14px;"><img src="images/world_globe.png" class="headerImage" alt="World Globe" /></p>
          <p style="margin-top:-150px; margin-left:150px; color:white; font-family:'Comic Sans MS', cursive; font-weight:bold; font-size:35px;">WorldTravel Global Tourism Application</p>
          </header>

          <div class="content"<?php echo ($pageDimensions); ?>>
            <h1><?php echo($regionName); ?></h1>

            <?php

            if(isset($invalidRegion)){
                echo ("<p>Sorry, the region \"$invalidRegion\" is not valid</p>");
            }

            ?>

            <?php if(isset($region)){ ?>
            &nbsp;
            <div id="flashContent" <?php echo $mapDivStyle; ?>>
            </div>   
            <?php } ?>
            <p></p>
            <?php

            if(!isset($invalidRegion)){

                $query = "SELECT * FROM region WHERE region.regionID = (SELECT region.regionID from region WHERE region.regionName = '$region');";

                $result = mysql_query($query, $connection);
                $row = mysql_fetch_assoc($result);
                $regionPopulation = numberFormat($row['regionPopulation']);
                $regionLandArea = numberFormat($row['regionLandArea']);
                $populationDensity = round((($row['regionPopulation'])/($row['regionLandArea'])), 2);
                $regionCountries = $row['regionCountries'];
                $numberPrefix = "";

                echo("<p><span class=\"infoHeadings\">Region population:</span> " . $regionPopulation . ".</p>");
                echo("<p><span class=\"infoHeadings\">Region land area:</span> " . $regionLandArea . " square kilometers.</p>");
                echo("<p><span class=\"infoHeadings\">Population density:</span> " . $populationDensity . " people per square kilometer.</p>");
                echo("<p><span class=\"infoHeadings\">Countries in region:</span> " . $regionCountries . ".</p>");


            }
            ?>


            <p><button type="button" onClick="location.href='index.php';" class="navigationButton">Back to World Map</button><p> 

            <!-- test link -->
            <p><a href="index.php">home</a></p>


          </div>


          <div class="footer"<?php echo ($footerMargin); ?>>
          </div>
        </div>
    </body>
</html>

Answer 1

事实证明，我的一个元素的 z 索引是问题所在。在我的页面上，我的页脚 div 的 z-index 为 20，上边距为 500px，主要内容区域的 z-index 值较低(按钮所在的位置)。因为边缘区域“覆盖”了按钮，所以我无法点击主要内容区域中的任何链接或按钮。

所以我已经解决了这个问题，尽管我仍然想知道为什么 FireFox 没有读取 z-indexing 而 I.E 读取了 - 我使用谷歌的 html5shiv 在旧版本的 I.E 中启用 html5 元素)。