Question

我正在使用宝丽来效果结合砌体效果来构建投资组合页面。然而，虽然在Internet Explorer和Chrome中一切都是视觉上正确的，但在firefox中，人造偏光镜显示不正确，尤其是当他们切换列时。

https://jsfiddle.net/chris2001/atu52840/

/*portfolio */

#projects {
line-height: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
-moz-column-count: 2;
column-count: 2;
column-gap: 0px;
}

#projects img {
width: 100% !important;
height: auto !important;
}

#projects a {
    margin-bottom: 0px;
background: yellow;
 display: inline;
float: left;
margin: 0 10px 10px;
padding: 10px 10px 35px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
z-index:0;
    position:relative;

   }

 #projects a:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
 }

Answer 1

您正在使用仍处于候选状态的CSS。唯一适用于列数等属性的IE版本是IE10 +。我建议不要使用候选属性。相反，我建议你使用flexbox来解决这个问题。你可以在这里找到一个非常好的教程：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Polaroids /列在firefox中无法正确显示

1 个答案: