css - 图库灯箱插件问题

Question

我正在开发网站模板，刚刚发现图库灯箱插件存在问题。 http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html

当画廊有超过 1 张图像时，灯箱渲染得很好，但当它只有 1 张图像时，大图像包装器会变得比图像小。我有点发现导致问题的原因 - 此模板使用 foundation 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 宽。如果没有这段代码，盒子实际上会是 230 像素宽。

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

添加到类 lightbox-outer - overflow: hidden。

.lightbox-outer {
overflow: hidden;
}

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

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

EDIT2:我发现的其他东西，如果我从 .lightbox-skin 类中删除“width”，它就会再次开始运行。问题是这个宽度是动态应用于内联元素的吗？