Question

在这个作业中（我只能使用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课程，所以除了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;
}

Answer 1

标准规定您只能在块级元素（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;
}
```

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

1 个答案: