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

在此作业中(我只能使用 javascript)，我的页面在 Safari 和 Chrome 中显示正常，但在 Firefox 中显示不正常。在 Firefox 中，div“bookselection”显示在标题的右侧。知道为什么吗？

    <!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 类(class)，所以我不能使用除 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;
}

最佳答案

标准规定您只能在 block 级元素 (display:block) 上使用 float。显然，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;
}
```

关于Javascript 在 Safari 和 Chrome 中显示，但在 Firefox 中不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12771788/

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

上一篇：javascript - 更改 div 中的图像，但无法给出它和 javascript 变量 id

下一篇：php - Javascript 意外标记换行中非法