2

我试图弄清楚为什么这个网站中的内部 div会在 Safari 和 Chrome 中正确显示,但在 Firefox 中会出错。我在这里的jsfiddle上有代码。我对网页设计相当陌生,所以我可能遗漏了一些非常明显的东西,但我似乎无法弄清楚,也无法在网上的任何地方找到解决方案。非常感谢任何和所有帮助。

科林

 <!doctype html>
 <html>
 <head>
 <meta charset="UTF-8">

 <title>Code Example</title>

     <link href="_css/main_full.css" rel="stylesheet" type="text/css">
     <script src="_js/jquery-1.8.2.min.js"></script>
     <script src="_js/gallery.js"></script> 

 </head>

 <body>

 <div class="page_container">          

        <div class="gallery_container">


<a href="sunlight.html" title="© C.M.B 2012"><img id="pos1" src="_images/galleryimages_full/sunlight_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>

<a href="clownflat.html" title="© C.M.B 2012"><img id="pos2" src="_images/galleryimages_full/clownflat_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>  

<a href="goldensun.html" title="© C.M.B 2012"><img id="pos3" src="_images/galleryimages_full/goldensun_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>               

<a href="monstertheatre.html" title="© C.M.B 2012"><img id="pos4" src="_images/galleryimages_full/monstertheatre_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>          

<a href="home.html" title="© C.M.B 2012"><img id="pos5" src="_images/galleryimages_full/home_smallvector.jpg" width="250" height="194" alt="© C.M.B"></a>                 

<a href="wishingstar.html" title="© C.M.B 2012"><img id="pos6" src="_images/galleryimages_full/wishingstargallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="cozycave.html" title="© C.M.B 2012"><img id="pos7" src="_images/galleryimages_full/cozycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="coffeetable.html" title="© C.M.B 2012"><img id="pos8" src="_images/galleryimages_full/coffeetable_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>               

<a href="breakaway.html" title="© C.M.B 2012"><img id="pos9" src="_images/galleryimages_full/breakaway_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="happynappy.html" title="© C.M.B 2012"><img id="pos10" src="_images/galleryimages_full/happyns_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="boymeetsgirl.html" title="© C.M.B 2012"><img id="pos11" src="_images/galleryimages_full/boymeetsgirl_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="sadbaby.html" title="© C.M.B 2012"><img id="pos12" src="_images/galleryimages_full/sadbabygallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="salvation.html" title="© C.M.B 2012"><img id="pos13" src="_images/galleryimages_full/salvation_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="orangestart.html" title="© C.M.B 2012"><img id="pos14" src="_images/galleryimages_full/orangestart_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="spaceobjects.html" title="© C.M.B 2012"><img id="pos15" src="_images/galleryimages_full/spaceobjectsgallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="clown.html" title="© C.M.B 2012"><img id="pos16" src="_images/galleryimages_full/clown_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="ponycave.html" title="© C.M.B 2012"><img id="pos17" src="_images/galleryimages_full/ponycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="pacha.html" title="© C.M.B 2012"><img id="pos18" src="_images/galleryimages_full/pacha_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="goldstorm.html" title="© C.M.B 2012"><img id="pos19" src="_images/galleryimages_full/goldstorm_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="qero.html" title="© C.M.B 2012"><img id="pos20" src="_images/galleryimages_full/qerogallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>                 

<a href="bluesinmyheart.html" title="© C.M.B 2012"><img id="pos21" src="_images/galleryimages_full/theblues_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>   


        </div>  

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

CSS

@charset "UTF-8";
/* CSS Document */

/* Layout (global rules for fullsize) */

.page_container {
width: 1280px;
height: 3000px;
background-image: url(../_page_components/gallery/gallery_full.jpg);
margin: 0 auto 0 auto;
/*position: relative;*/
/* padding-top: 19.541%; 248 pixels*/
}

.gallery_container 
{
width: 66.7%;  /* 853 pixels */
height: 55.3%; /* 1659 pixels */
/*margin: 19.541% auto 0% auto; - equal to 248px*/
padding: 19.5% 0 0 0;
margin: 0% auto 0% auto;
}


#pos1 {  /* Top Left Corner*/
padding-left: 0.3%;
padding-right: 4.91%;   
padding-bottom: 5.3%;
}

#pos2 {  /* Middle top row */
padding-left: 0.42%;    
padding-bottom: 5.3%;
}

#pos3 {  /* Topr Right Corner */
padding-left: 5.35%;
padding-bottom: 5.3%;
}

#pos4 {  /* The rest of the images/rows follow the same positioning pattern */
padding-left: 0.4%;
padding-right: 4.75%;   
padding-bottom: 5.3%;
}

#pos5 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}

#pos6 {
padding-left: 5.15%;
padding-bottom: 5.3%;
padding-right: 0.2%;
}

#pos7 {
padding-left: 0.5%;
padding-right: 4.55%;   
padding-bottom: 5.3%;
}

#pos8 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}

#pos9 {
padding-left: 5.25%;
padding-bottom: 5.3%;
 }

#pos10 {
padding-left: 0.5%;
padding-right: 4.55%;   
padding-bottom: 5.3%;
}

#pos11 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}

#pos12 {
padding-left: 5.25%;
padding-bottom: 5.3%;
}

#pos13 {
padding-left: 0.5%;
padding-right: 4.55%;   
padding-bottom: 5.4%;
}

#pos14 {
padding-left: 0.5%;
padding-bottom: 5.4%;
}

#pos15 {
padding-left: 5.25%;
padding-bottom: 5.4%;
}

#pos16 {
padding-left: 0.5%;
padding-right: 4.55%;   
padding-bottom: 5.6%;
}

#pos17 {
padding-left: 0.5%;
padding-bottom: 5.6%;
}

#pos18 {
padding-left: 5.25%;
padding-bottom: 5.6%;
}

#pos19 {
padding-left: 0.5%;
padding-right: 4.55%;   

}

#pos20 {
padding-left: 0.5%;

}

#pos21 {
padding-left: 5.25%;

}
4

1 回答 1

1

使固定

设置.gallery_container img { display: inline-block;}修复它。见小提琴

为什么

显然 Firefox 并不一定将其img视为display一开始的设置,而其他浏览器显然是。请注意,我实际上并没有在您的网站上看到 Firefox 17 中的问题,只是在小提琴中,这让我认为这与未加载图像有关。

于 2012-12-07T02:22:50.957 回答