Question

我正在开发一个网站模板，只是发现了一个画廊灯箱插件的问题。 http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html

当图库有超过1张图像时，灯箱渲染得很好但是当它只有1张图像时，大图像包装器会比图像小。我发现了导致问题的原因 - 这个模板使用了基础3.0框架，所以在foundation.min.css文件中，第一个选择器导致了问题：

"    * {
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      }

我试图删除它并修复了问题但整个网站都被破坏了。我不确定我要粘贴哪些代码。如有必要，我可以发布一个链接来下载所有模板文件。谢谢！

Answer 1

请勿更改此代码，而是修改包装器的css。您发布的代码片段告诉所有元素包含任何边框，以及宽度计算中的填充。因此，具有10px填充和5px边框空间且宽200px的盒子实际上是200px宽。没有这个代码，这个盒子的宽度实际上是230px。

你可以这样做......

添加到课程lightbox-outer - overflow: hidden。

.lightbox-outer {
overflow: hidden;
}

这有效，但它隐藏了部分图像，就像你的盒子不想缩放到图像的大小。

在设置特定比例的任何地方，您是否在灯箱中设置了一个设置？

EDIT2：我发现的其他内容，如果我从类.lightbox-skin中删除“width”，那么它会再次开始表现。问题是这个宽度是动态地应用于内联元素吗？