html - 图片库缩略图(radiogroup 输入)在 Firefox 中变大

Question

我有一小段代码可以显示图像的缩略图，当您单击它们时，它们会显示每个图像的放大版本。它在 Google Chrome 中完美运行，但在 Firefox 中缩略图变大，因此它们不再适合一行(我使用百分比)，我相信这一定是一个简单的修复，但遗憾的是我不知道它是什么。

这是我网站上的预览:

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

我使用样式化的 radio 输入，对于那些不知道的人，输入之间不能有空格，否则出于某种原因会添加额外的边距!这花了一段时间才弄明白!!

不管怎样，每一个的宽度都是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，并且您无缘无故地使这些元素的子元素成为 float:left;。

您应该删除图像的 float (虽然这不是您当前的问题)问题是框大小，将其更改为边框框以计算边框到元素宽度。

将此添加到您的 CSS

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