Javascript在Safari和Chrome中显示，但不是Firefox？

在这个任务中（我只能使用JavaScript），我的页面在Safari和Chrome中显示正常，但在Firefox中不显示。在Firefox中，div“bookselection”显示在标题的右侧。任何想法为什么？Javascript在Safari和Chrome中显示，但不是Firefox？

<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 

<title>Armchair Bookstore</title> 
<meta name="description" content="Armchair bookstore, local and online store"> 
<meta name="keywords" content="books, special orders, children books"> 

<link href="css/armchair.css" rel="stylesheet"> 


</head> 

<body> 

    <!-- wrapper section starts --> 
    <div id="wrapper"> 


    <!-- header section starts --> 
    <div id="header"> 
      <img src="images/header.jpg" alt="Armchair Bookstore Logo" width="975" height="230" class="floatcenter"> 
    </div> 
    <!-- header section ends --> 


    <!-- menu section starts -->  
    <div id="menu"> 
     <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="newrelease.html" id="current" class="first">New Releases</a></li> 
       <li><a href="placeholder.html">Special Selection</a></li> 
       <li><a href="contact.html">Contact</a></li> 
        <li><a href="placeholder.html">On Sale</a></li> 
      </ul> 
    </div> 
     <!-- menu section ends --> 


     <!--Text starts --> 
     <div id="content"> 
    </div> 
    &nbsp;<img src="images/viewcart.jpg" alt="" width="130" height="59" class="floatright" /> 
     <div id="bookselection"> 
     <script type="text/javascript" src="js/armchair.js"></script> 
    </div> 
    <!-- Text ends --> 


     <!-- footer section starts --> 
    <div id="footer"> 
     <p class="bottom">Copyright &copy; 2012 oo Design | All Rights Reserved | <a href="#">Terms and Conditions</a></p> 
    </div> 
    <!-- foot section ends -->  

    <!-- wrapper section starts --> 

</div>  
</body> 
</html>

这是我的.js文件。我刚开始在JavaScript中的过程，所以我不能用不是JavaScript之外的任何其他编程代码：

var str = "<table>"; 
var folder ="images/"; 

// Book Title array 
var title = new Array(); 
    title[0] = "The Innocent"; 
    title[1] = "Zero Day"; 
    title[2] = "The Bat"; 
    title[3] = "Mad River"; 
    title[4] = "Low Pressure"; 
    title[5] = "Zagreb Cowboy"; 

// Book author array 

var author = new Array(); 
    author[0] = "Marc Webb"; 
    author[1] = "Joss Whedon"; 
    author[2] = "Chris Nolan"; 
    author[3] = "Joe Johnson"; 
    author[4] = "Jon Favreau"; 
    author[5] = "Martin Campbell"; 


// Release date array 

var release = new Array(); 
    release[0] = "April 2012"; 
    release[1] = "August 2011"; 
    release[2] = "October 2012"; 
    release[3] = "October 2012"; 
    release[4] = "September 2012"; 
    release[5] = "October 2012"; 




// Book Cover array 
var cover = new Array(); 
    cover[0] = "theinnocent.jpg"; 
    cover[1] = "zeroday.jpg"; 
    cover[2] = "thebat.jpg"; 
    cover[3] = "madriver.jpg"; 
    cover[4] = "lowpressure.jpg"; 
    cover[5] = "zagrebcowboy.jpg"; 


// Book Price array 
var price = new Array(); 
    price[0] = "18.18"; 
    price[1] = "9.50"; 
    price[2] = "15.64"; 
    price[3] = "18.50"; 
    price[4] = "15.00"; 
    price[5] = "14.56"; 


// Book plot array 
var plot = new Array(); 
    plot[0] = "It begins with a hit gone wrong. Robie is dispatched to eliminate a target unusually close to home in Washington, D.C. But something about this mission doesn't seem right to Robie, and he does the unthinkable. He refuses to kill. Now, Robie becomes a target himself and must escape from his own people. "; 
    plot[1] = "John Puller is a combat veteran and the best military investigator in the U.S. Army's Criminal Investigation Division. His father was an Army fighting legend, and his brother is serving a life sentence for treason in a federal military prison. Puller has an indomitable spirit and an unstoppable drive to find the truth." ; 
    plot[2] = "Before Harry took on the neo-Nazi gangs of Oslo, before he met Rakel, before The Snowman tried to take everything he held dear, he went to Australia. Harry Hole is sent to Sydney to investigate the murder of Inger Holter, a young Norwegian girl, who was working in a bar. Initially sidelined as an outsider, Harry becomes central to the Australian police investigation when they start to notice a number of unsolved rape and murder cases around the country."; 
    plot[3] = "The first person they killed was a highway patrolman. The second was a woman during a robbery. Then, hell, why not keep on going? As their crime spree cuts a swath through rural Minnesota, some of it captured on the killers'cell phones and sent to a local television station."; 
    plot[4] = "Bellamy Lyston was only 12 years old when her older sister Susan was killed on a stormy Memorial Day. Bellamy's fear of storms is a legacy of the tornado that destroyed the crime scene along with her memory of what really happened during the day's most devastating moments."; 
    plot[5] = "Yugoslavia, 1991. The State is crumbling, and in the midst of the political chaos secret policeman Marko della Torre has been working both sides of the law, but somewhere along the way he's crossed the line."; 


for (var i = 0; i < cover.length; i++) 
{ 
    str += "<tr><td><img src='" + folder + cover[i] + "' width='75' height='115'></td>"; 
    str += "<td width='30%'><h3>" + title[i] + "<h5>Buy Now" + "</h3><br />Price: $" + price[i] + "<br />Author: " + author[i] + "<br />Date of release: " + release[i] + "</td>"; 
    str += "<td><p>" + plot[i] + "</p></td></tr>"; 
} 

str += "</table>"; 


var elem = document.getElementById("bookselection"); 
elem.innerHTML = str;

这里是的CSS

/*--------------Body-----------------*/ 

html {background-color: #fff} 

body { 
    color: #000; background: #fff; 
    font-family: "Helvetica Neue",helvetica,arial, sans-serif; 
    font-size: 90%; 
    text-align: left; 
    width: 976px; 
    margin-left: auto; 
    margin-right: auto; 
} 


p { 
    margin-left: 10px; 
    margin-right: 5px; 
    text-align: left; 
    font-size: 110%; 
} 


/*--------------Links formatting------------------*/ 

a:link { 
    background: #fff; color: #7d890d; 
} 


a:visited { 
    color: #034769; 
} 


a:hover { 
    color: #034769; 
    text-decoration: none; 
} 

a:active{ 
    background: #63add0; color: #fff; 
} 

/*Bottom link formatting*/ 

p.bottom a:link { 
    background: #2d1d06; color: #f9b41f; 
} 


p.bottom a:visited { 
    color: #fff; 
} 


p.bottom a:hover { 
    color: #7d890d; 
    text-decoration: none; 
} 
p.bottom a:active{ 
    background: #8742d6; color: #fff; 
} 


/*--------------------Page wrapper----------------*/ 
#wrapper { 
    margin: 0 auto; 
    width: 976px; 
    text-align: left; 
} 

/*Banner styles*/ 

#header { 

    width: 976px; 
    padding-left: 0px; 
    padding-bottom: 10px; 
    padding-top: 15px; 
} 


#footer { 
    clear: both; 
    background: #2d1d06; color: #fff; 
    font-family: "Helvetica Neue",helvetica, arial, sans-serif; 
    font-size: 90%; 
    font-weight: normal; 
    width: 976px; 
    padding-bottom: 3px; 
    padding-top: 3px; 
} 

#footer p { 
    text-align: center; 
} 

#content 
{ 
    margin-left: 15px; 
} 

/*---------------Navigation styles-------------------*/ 

#menu { 
    float: left; 
    margin:0; 
    padding-top: 0px; 
    width: 100%; 
    background: #7d890d; color: #fff; 
} 


#menu ul { 
    margin: 0px; 
    position: relative 
} 


#menu ul li { 
    display: inline; 
} 


#menu ul li a { 
    float: left; 
    padding: 5px 16px; 
    margin-right: 0px; 
    background: #7d890d; color: #fff; 
    text-decoration: none; 
    border-right: 1px solid #e2e2e2; 
} 


#menu ul li a:hover { 
    color: #fff; background: #f9b41f; 
    text-decoration: underline; 

} 

#menu li a#current { 
    background: #ba1212; color: #fff; 
} 



/*-------------Image area--------------*/ 

img 
{ 
    border: 0px 0px ; 
    padding-top: 30px; 
    padding-bottom: 25px; 
    border-radius: 0px; 
} 



.floatcenter { 
    float: left; 
    margin: 0px; 
    padding: 1px; 
    border: none; 
} 

.floatcenterb { 
    margin: 0px 228px; 
    padding: 1px; 
    border: none; 
} 

.floatright 
{ 
    float: right; 
    margin: 20px; 
    padding: 1px; 
    border: none; 
} 
.floatright2 
{ 
    float: right; 
    margin: 20px; 
    padding: 1px; 
    border: none; 
} 



/*---------------Headings----------------*/ 
hr{ 
    position: relative; 
    width: 90%; 
    margin-left: 25px; 
    margin-right: 25px; 
    color: #3ca0d0; 
    border: 1px; 
    border-style: dotted; 
} 

h1{ 
    color: #2d1d06; 
    font-size: 140%; 
    font-weight: normal; 
    margin-left: 10px; 

} 

h2{ 
    color: #2d1d06; 
    font-weight: normal; 
    font-size: 130% ; 
    text-align: center; 
    text-decoration: underline; 
    margin-left: 0px; 
} 

h3{ 
    font-size: 120%; 
    color: #2d1d06; 
    font-weight: bold; 
    text-align: left; 

} 

h4{ 
    font-size: 120%; 
    color: #2d1d06; 
    font-weight: bold; 
    text-align: center; 

} 

h5{ 
    font-size: 110%; 
    color: #7d890d; 
    width: 70px; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    font-weight: bold; 
    text-align: left; 

} 

/* Table styling */ 

table { 
    border: 0px; 
    border-collapse:collapse; 
    width: 100%; 
    margin: auto; 
    font-size: 90%; 
} 

th { 
    background-color: #000; 
    color: #FFF; 
} 

td { 
    padding: 2px 4px; 
    text-align: left; 
    border-bottom: 0px; 
} 


/*contact page*/ 

fieldset 
{ 
    margin: 10px 20px; 
    padding: 5px 10px; 
    border: 1px solid #3697B5; 
    background:#fff; 
    text-align: center; 
} 

legend 
{ 
    font-size: 80%; 
    color: #000; background: #fff; 
    font-weight:bold; 
} 



label 
{ 
    float: left; /* labels and input fields line up horizontally */ 
    width: 200px; 
    margin-left: 5px;  
    text-align: center; 
} 

textarea 
{ 
    margin: 5px 10px; 
}

来源

2012-10-07 wizzme

css在哪里？ –

看来你的CSS有问题，而不是JS。 – Inferpse

该标准规定，你只能在块级使用float高级元素（display:block）。显然，Chrome和Safari会自动推广float属性设置为display:block或display:inline-block;的元素。所以适用display:block您.floatright：

.floatright 
{ 
    display: block; 
    float: right; 
    margin: 20px; 
    padding: 1px; 
    border: none; 
}

也有一些小窍门：

当你与var myArray = new Array(value0,value1,value2)
创建可以使用var myArray = [v0,v1,v2...]代替var myArray = new Array(v0,v1,v2...)您可以初始化数组。这使您能够创建变量稍微容易一些：
```
var title = ["The Innocent", "Zero Day", "The Bat", 
     "Mad River", "Low Pressure", "Zagreb Cowboy"]; 
```
您可以用,组CSS选择器，该规则将被应用到该组中的所有选择：
```
h1, h2, h3, h4{ 
    color: #2d1d06; 
} 
h3, h4{ 
    font-weight: bold; 
} 
```

来源

2012-10-07 22:11:37 Zeta

Javascript在Safari和Chrome中显示，但不是Firefox？

回答

相关问题