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

我有一小段代码显示图像的缩略图，当你点击它们时，它们会显示每个图像的更大版本。它在Google Chrome上运行得非常好，但在Firefox上，缩略图变得越来越大，因此它们不再适合一行（我使用百分比），我确信这一定是一个简单的修复，但遗憾的是，我不知道它是什么

以下是我的网站上的预览：

我使用风格化的无线电输入，对于那些不知道的人来说，输入之间不能有空格，否则出于某种原因会增加额外的边距！这花了一段时间才弄明白

无论如何，每一个都有11.11%的宽度，是9个缩略图宽度的99.99%

我已经添加了完整的代码，但实际上只有RadioBox才是问题所在

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 -->

---

您在CSS中做了一些奇怪的事情。您将元素彼此相邻放置，使它们成为

内联块

，还使此项的子元素

浮动：左没有理由

您应该删除图像的浮动（虽然这不是您当前的问题）。问题是框大小，请将其更改为边框框，以计算边框到项目宽度

将此添加到CSS中

.radiogallery, 
.radiogallery * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

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

根据，Firefox似乎还有两个版本要放弃前缀的要求

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

编辑：
使用缩略图有两个原因：渲染和下载大小/速度。渲染是一个问题，因为某些浏览器，特别是在移动设备上，可能难以动态调整大型图像的大小

关于您的评论，是的，如果您没有做其他更改，使用更多图像将增加数据负载。然而，现在，由于页面正在加载9个大图像，我花了约8秒钟加载（5次试用，缓存已禁用），并且我在台式计算机上有一个快速的internet连接。在移动设备上，如果连接速度慢得多，查看器可能会放弃页面加载

另一种选择是延迟加载这些图像，可能是使用JS，直到页面加载之后，甚至直到用户单击缩略图。由于这些图像约占页面的50%，您可以预期页面负载会显著提高。
如果可能，是否尝试在缩略图上使用fix size？顺便说一句，将每个缩略图的宽度减小到10.6左右似乎是可行的，但显然在chrome中，它不再填充屏幕（正如我所希望的那样）。我的意思是说，您的缩略图图片的宽度和高度也是width=“960”height=“720”更改它们也会有所帮助。为此，我在表单加载它们时使用全尺寸图像，因此，它是与缩略图相同的图像，因为它是“缩放”版本。拥有缩略图大小的版本也意味着加载更多数据。还是我错了？？您所指的元素是输入元素？如果它们不相邻，那么输出就不同了，我在这里的某个地方读到了这个解决方案，它是有效的（这就是为什么它们之间没有空格/硬返回）。我看不到float:left在哪里，我查看了我的代码并在这个页面上搜索，没有float:left；我已经添加了你的代码片段，一切都很好-谢谢。。。尽管如此，请参见上面的评论…：）谢谢@PoipleShadow我正在转发到
。新闻博客部分img
这些图片确实
float:left但它们位于使用
显示：内联块的标签中。仅标签就可以将这些图像彼此相邻地排序。不需要在该元素内部浮动。只是一个暗示没什么太重要的