Question

我有一小段显示图像缩略图的代码，当您点击它们时，它们会显示每个图像的更大版本。它在谷歌浏览器中完美运行，但在Firefox中，缩略图变得更大，因此它们不再适合单行（我使用百分比），我确信它必须是一个简单的修复，但遗憾的是我不知道它是什么。

以下是我网站上的预览：

http://www.poipleshadow.com/Children-Charity-Blog-2014-02-February#CarnivalForTheChildren

我使用样式的无线电输入，对于那些不知道的人，输入之间不能有空格，否则会因某些原因而增加额外的边距！这需要一段时间来弄明白!!

无论如何，每一个的宽度为11.11％，而9个缩略图的宽度应达到99.99％。

我已经添加了完整的代码，但实际上只有放射线框是问题。

CSS

/* ********************** NEW GALLERY CODE ************************/ 
/* IMPORTANT - IN THE CODE THERE CAN'T BE 
   SPACE BETWEEN EACH INPUT (Eg New Lines)  
   AS IT MESSES WITH FORMAT OF THE DISPLAY */
.radiogallery {position:relative;  width:100%; height:auto; padding:0; border:0; margin:0; overflow:hidden; background:none; text-align:center;} /*Bounding Box */

/* Use this border as the border to the image, the border on the label is for spacing instead of using a margin */
.radiogallery img { max-width: 100%; height:auto;  padding:0; margin:0;   border: 2px solid #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }


/************************ Thumbnails ************************/
/* Use the Border to add spacing between the images */
.radiogallery label {display:inline-block; overflow:hidden; line-height:0; opacity:1; height:auto;  margin:0; padding:0; margin-bottom:-4px; border: 2px solid #eee; cursor:pointer; background:none; box-sizing:border-box; } /* Thumbnails */


.radiogallery label.nine  { width:11.11%; } /* Thumbnails (9 ACROSS)*/


.radiogallery input {display:none;   } /* Check Box Selection Status (NOT SHOWN) */
.radiogallery input:checked + label img{opacity:1; border: 1px solid #09F;     }
.radiogallery input.pics + label img:hover  {opacity:1; border: 1px solid #09F;   }
.radiogallery input:checked + label:hover {opacity:1; }

/************************ MAIN IMAGE (Hiding) ************************/
.radiogallery div.large {position:absolute;display:inline-block; left:0; top:730px; width:100%; height:auto; margin:auto;  border:0; background:none; padding:0px; text-align:center; opacity:0; z-index:100; overflow:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s; }
/* Make Float:none so that image is centered */
.radiogallery div.large img { margin:auto; background:none; width:720px; width:auto; margin:0;
margin-top:10px; padding:2px; background:white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbe3ff; float:none;}


/**************************************************** MAIN IMAGE (Showing) ****************************************************/
.radiogallery input#pic1:checked ~ div.pic1,
.radiogallery input#pic2:checked ~ div.pic2,
.radiogallery input#pic3:checked ~ div.pic3,
.radiogallery input#pic4:checked ~ div.pic4,
.radiogallery input#pic5:checked ~ div.pic5,
.radiogallery input#pic6:checked ~ div.pic6,
.radiogallery input#pic7:checked ~ div.pic7,
.radiogallery input#pic8:checked ~ div.pic8,
.radiogallery input#pic9:checked ~ div.pic9,
.radiogallery input#pic10:checked ~ div.pic10, 
.radiogallery input#pic11:checked ~ div.pic11,
.radiogallery input#pic12:checked ~ div.pic12,
.radiogallery input#pic13:checked ~ div.pic13,
.radiogallery input#pic14:checked ~ div.pic14,
.radiogallery input#pic15:checked ~ div.pic15,
.radiogallery input#pic16:checked ~ div.pic16 {position:relative; opacity:1; z-index:100; top:10%; height:auto; margin:auto; padding:0;  background:none; }

HTML

<div class="radiogallery">

<input type="radio" name="pic" id="pic1" class="pics" checked="checked"><label for="pic1" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-01.JPG" alt="Carnival and Goa Entertainers 1" width="960" height="720"></label><input type="radio" name="pic" id="pic2" class="pics"><label for="pic2" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-02.JPG" alt="Carnival and Goa Entertainers 2" width="960" height="720"></label><input type="radio" name="pic" id="pic3" class="pics"><label for="pic3" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-03.JPG" alt="Carnival and Goa Entertainers 3" width="960" height="720"></label><input type="radio" name="pic" id="pic4" class="pics"><label for="pic4" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-04.JPG" alt="Carnival and Goa Entertainers 4"  width="960" height="720"></label><input type="radio" name="pic" id="pic5" class="pics"><label for="pic5" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-05.JPG" alt="Carnival and Goa Entertainers 5" width="960" height="720"></label><input type="radio" name="pic" id="pic6" class="pics"><label for="pic6" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-06.JPG" alt="Carnival and Goa Entertainers 6" width="960" height="720"></label><input type="radio" name="pic" id="pic7" class="pics"><label for="pic7" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-07.JPG" alt="Carnival and Goa Entertainers 7" width="960" height="720"></label><input type="radio" name="pic" id="pic8" class="pics"><label for="pic8" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-08.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></label><input type="radio" name="pic" id="pic9" class="pics"><label for="pic9" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-09.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></label>


 <div class="pic1 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-01.JPG" alt="Carnival and Goa Entertainers 1" width="960" height="720"></div>
 <div class="pic2 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-02.JPG" alt="Carnival and Goa Entertainers 2" width="960" height="720"></div>
 <div class="pic3 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-03.JPG" alt="Carnival and Goa Entertainers 3" width="960" height="720"></div> 
 <div class="pic4 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-04.JPG" alt="Carnival and Goa Entertainers 4" width="960" height="720"></div> 
 <div class="pic5 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-05.JPG" alt="Carnival and Goa Entertainers 5" width="960" height="720"></div> 
 <div class="pic6 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-06.JPG" alt="Carnival and Goa Entertainers 6" width="960" height="720"></div> 
 <div class="pic7 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-07.JPG" alt="Carnival and Goa Entertainers 7" width="960" height="720"></div> 
 <div class="pic8 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-08.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></div> 
 <div class="pic9 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-09.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></div> 
</div> <!-- end radiogroup -->

Answer 1

你在CSS中做了一些奇怪的事情。您将元素放在彼此旁边，使它们inline-block也可以无条件地生成此项{child}的子元素。

你应该删除图像的浮动（虽然这不是你当前的问题）问题是盒子大小调整，将其更改为border-box来计算项目宽度的边框。

将此添加到您的CSS

float:left;

Answer 2

将Mozilla的盒子大小的供应商前缀版本添加到标签

.radiogallery label { -moz-box-sizing: border-box; }

根据http://caniuse.com/#feat=css3-boxsizing，似乎Firefox仍然有2个版本，而不是要求使用前缀。

正如其他人所提到的，将较大的图像嵌入较小的缩略图区域通常是不好的做法。你应该使用一些图像编辑软件制作一个较小的缩略图版本，并将其用于缩略图，同时链接到大版本以获得完整视图。

修改：使用缩略图有两个原因：渲染和下载大小/速度。渲染是一个问题，因为某些浏览器，尤其是移动设备上的浏览器，很难动态调整大图像的大小。

关于您的评论，是的，如果您没有进行其他更改，则使用更多图像会增加数据加载。但是，现在，因为页面正在加载9个大图像，所以需要大约8秒才能加载（5次试用，禁用缓存）并且我在台式计算机上有快速的互联网连接。在移动设备上，连接速度较慢，观看者可能会放弃页面加载。

另一种方法是推迟加载这些图像，可能使用JS，直到页面加载后，甚至直到用户点击缩略图。由于这些图片占您网页的约50％，因此您可以预期页面加载量会明显改善。

Firefox中的图片库缩略图（radiogroup输入）变得更大

2 个答案: