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

Question

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

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

没有图片的专栏也可以；当存在图像时，列会在 FF 和 Opera 上展开。 Chrome / Safari 正常。

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

疯了，任何想法表示赞赏。

Answer 1

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

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

而且我认为不修改默认网格是个好主意，例如应用 box-size padding 和 margin 等。如果您需要在某些元素周围留出额外的间距，只需将它们放入一个容器 <div> 并在其上设置属性，然后将其放入 gird.

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

Pure CSS: Responsive images breaking columns with border-box and padding on Firefox and Opera

css

firefox

yui-pure-css