HTML5<;按钮>;在Firefox中不起作用,但在IE中起作用
这真是一个令人沮丧的问题。。。我用CSS3制作了一个HTML5按钮-这个按钮在IE中工作(功能上),但是当我在Firefox(v16.0.2)中打开我的页面时,这个按钮不工作(例如,你不能点击它-它什么也不做)。更奇怪的是,我把一个标准的a href链接仅仅用于测试(在同一页面上,按钮旁边),而我甚至不能点击它(例如,它什么也不做)。我在E9和FireFox 16.0.2两台不同的机器上测试了这个页面 以下是我的按钮的HTML代码:HTML5<;按钮>;在Firefox中不起作用,但在IE中起作用,html,css,Html,Css,这真是一个令人沮丧的问题。。。我用CSS3制作了一个HTML5按钮-这个按钮在IE中工作(功能上),但是当我在Firefox(v16.0.2)中打开我的页面时,这个按钮不工作(例如,你不能点击它-它什么也不做)。更奇怪的是,我把一个标准的a href链接仅仅用于测试(在同一页面上,按钮旁边),而我甚至不能点击它(例如,它什么也不做)。我在E9和FireFox 16.0.2两台不同的机器上测试了这个页面 以下是我的按钮的HTML代码: <p><button type="butto
<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>
如果我对这个按钮的实现适用于其他任何人(在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)){ ?>
<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>
事实证明,我的一个元素的z索引就是问题所在。在我的页面上,我的页脚div的z-index为20,上边距为500px,主内容区域的z-index值较低(按钮所在的位置)。因为边距区域“覆盖”了按钮,所以我无法单击主内容区域中的任何链接或按钮
所以我已经解决了这个问题,尽管我仍然想知道为什么FireFox没有阅读z-indexing,而I.E阅读了——我使用Google的html5shiv在旧版本的I.E中启用html5元素)。尝试添加分号来完成JS语句:onClick=“location.href=”index.php';“另外,确保你已经关闭了所有其他已打开的标签(我曾经遇到过这个问题),并且你定义了
和
。在我的Firefox 17(beta版)中运行良好-即使没有其他标签,例如
…你运行的Firefox版本是什么?@awashburn阅读问题,它的16.0.2你的测试页面的url是什么?我希望不是index.php
(使用与第一次相同的GET请求重新加载页面本身有什么意义
<?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)){ ?>
<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>