纯 CSS：响应式图像在 Firefox 和 Opera 上使用边框和填充打破列答案

【问题标题】：Pure CSS: Responsive images breaking columns with border-box and padding on Firefox and Opera纯 CSS：响应式图像在 Firefox 和 Opera 上使用边框和填充打破列
【发布时间】：2015-03-20 06:18:03
【问题描述】：

我使用 Yahoo Pure CSS 的响应式网格作为 WordPress 主题/布局的基础。

http://smartwatchapps.co.uk/module-test/

没有图片的栏目很好；当存在图像时，列会在 FF 和 Opera 上展开。 Chrome / Safari 没问题。

当我根据http://purecss.io/grids/ 向 Pure 单位添加 box-sizing:border-box 和水平填充时会发生这种情况

/* Apply padding to Pure units
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.pure-g > [class*="pure-u"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px;
}
img{
max-width: 100%;
height: auto;
display: block;
}

如果我删除 Pure 单元上的 box-sizing:border-box 和 padding，并将其添加到 Pure 单元内的 div 中，也会发生同样的事情。

添加宽度：100% 修复了 FF 和 Opera 上溢出的图像，但当然这会使所有图像的容器宽度达到 100%（例如，此页面上 OJ 的小图像然后扩展以填充 100% 的容器） -所以这不是一个可行的解决方案。

似乎不会发生在纯 g 未嵌套在另一个页面中的其他页面上：

http://smartwatchapps.co.uk/markup-image-alignment/

发疯了，任何想法都值得赞赏。

【问题讨论】：

标签： css firefox yui-pure-css

【解决方案1】：

我认为是容器上的 float: left; 属性改变了行为。而且看起来你甚至不需要它，所以删除它。

.content-block {
    float: left; /*get rid of this line*/
}

而且我认为最好不要修改默认网格，例如应用box-sizepadding和margin等。如果您需要在某些元素周围增加间距，只需将它们放入容器@987654326 @ 并在其上设置属性，并将其放入网格中。

【讨论】：

是的，删除 .content-block 上多余的浮动可以解决这个问题，谢谢！