2012-11-05 4 views
0

이것은 정말 초조 한 문제입니다 ... HTML5 버튼을 CSS3 스타일로 만들었습니다.이 버튼은 IE에서 (기능적으로) 작동하지만 Firefox에서 내 페이지를 열 때 (v 16.0.2) 버튼이 작동하지 않습니다 (예 : 클릭 할 수 없음 - 아무것도하지 않음). 심지어 더 이상한 것은 테스트 용 href 링크 (버튼 옆에있는 같은 페이지에 있음)를 삽입했기 때문에 클릭하지도 못한다는 것입니다 (예 : 아무것도 수행하지 않음). 저는이 페이지를 I.E 9와 FireFox 16.0.2의 두 가지 다른 컴퓨터에서 테스트했습니다.HTML5 <button>은 Firefox에서는 작동하지 않지만 IE에서는 않습니다

<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 : 여기

은 HTML 내 버튼에 대한 코드입니다

이 버튼의 내 구현, (IE와 파이어 폭스 모두에서) 다른 사람을위한하시기 바랍니다 작동하는 경우
.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); 
} 

나에게 알려주세요 - 그렇지 않으면 내가 잘못한 것을했을 때도 설명해주십시오.

건배!

편집 : 다음은 페이지 중 하나에 대한 전체 코드입니다. 그것은 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> 
+0

JS 문을 완성하기 위해 세미콜론을 추가하십시오. onClick = "location.href = 'index.php';" 또한 열려있는 다른 모든 태그를 닫았는지 확인하십시오 (한 번 문제가 있음). 그리고 ''과 ''을 정의했는지 확인하십시오. –

+0

은 파이어 폭스 17 (베타)에서 잘 작동합니다. - ''과 같은 다른 태그가 없더라도 ... – Aprillion

+0

어떤 Firefox 버전을 실행하고 있습니까? –

답변

2

내 요소 중 하나의 z- 색인 생성이 문제가되었습니다. 내 페이지에는 Z- 인덱스 20, 상단 여백 500px의 꼬리말 div가 있고 기본 콘텐츠 영역에는 z- 색인 값이 더 낮습니다 (버튼이있는 위치). 여백 영역이 버튼을 덮고 있기 때문에 주 컨텐츠 영역의 링크 나 버튼을 클릭 할 수 없었습니다.

파이어 폭스가 왜 z- 색인 생성을 읽지 않았고 I.E가 그랬는지 궁금하지만, 문제를 해결했습니다. 이전 버전의 I.E에서 html5 요소를 사용하기 위해 Google의 html5shiv를 사용했습니다.

관련 문제