【发布时间】：2012-02-27 20:00:39
【问题描述】：
我正在构建一个仅使用 CSS3 显示网格并过滤掉缩略图的投资组合网站。
You can see what I've done here.
我通过使用 this tutorial 和 :checked 伪类使过滤器功能正常工作。
网格是使用 css3 列创建的，以创建无缝的响应式照片网格。我用Chris Coyier's example。
在大多数现代浏览器中一切正常，但在 iPhone 的移动 safari 中却中断了。经过进一步测试，它似乎也可以在 iPhone 的 Sleipnir 浏览器中中断，但在 Opera Mini 浏览器中可以正常工作。此外，它在适用于 iPad 的 iOS Safari 上执行完全相同的操作。
还需要注意的是，由于浏览器宽度较小，因此不会出现该错误。它适用于 Mac OSX Safari 5 上的小浏览器宽度。
现在解决问题： 在 iPhone 上查看时，一切看起来都很棒，直到您单击过滤器标签（网页设计、插图、字体、标识和打印）。点击标签后，什么都不会移动。只有缩略图的不透明度会改变。例如，单击“身份”后，右侧的列中断并且图像似乎消失了。现在，点击“全部”，图片会重新出现在右栏中，并且所有内容都与您第一次访问该页面时一样。
图像似乎位于第一列图像下方，位于页脚下方且看不见。
这是假设点击“身份”后的样子 — http://cl.ly/1M3F1t1N410s150h1o40
这就是它实际上现在的样子——http://cl.ly/0r1v0Z2c1f0I2U0X0T3m
更新：
从我的 CSS 中删除 list-style: none; 似乎改善了很多。我不知道为什么。虽然仍然不能完美地工作。一些缩略图仍在消失。会继续努力的。
更新 2： 我在两个运行本机浏览器的安卓平板电脑上测试了该网站。它似乎在android上做同样的事情。这真的很烦人，因为它只发生在 webkit（我认为）移动浏览器上。也许这与标签/输入有关。这是我能想到的唯一与移动浏览器不同的地方。我必须输入一些 javascript，以便 iOS Safari 允许标签上的触摸事件。默认情况下，iOS 不允许您触摸标签以选择输入（我正在使用隐藏的单选按钮）。我不知道为什么会在页面上移动图像。也许与缩放输入触摸功能有关？
更新 3： 可在此处找到的 Firefox 移动开发人员工具上工作：http://www.mozilla.org/en-US/mobile/。 这让我相信这绝对是一个移动 webkit 问题，而不仅仅是 iOS。
如果您有兴趣，这里是我用于 :checked 伪类缩略图过滤的代码。
.ff-container input{
display: none;
}
.ff-items li img{
display: block;
}
.clr {
clear:both;
}
.ff-items li{
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li,
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3,
.ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4,
.ff-container input.ff-selector-type-5:checked ~ .ff-items .ff-item-type-5{
opacity: 1;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3),
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4),
.ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5){
opacity: 0.1;
}
HTML 的一小部分：
<li class="ff-item-type-1"><a href="projects/emily-patridge/"><img src="images/em_c.jpg" alt="Emily Patridge Website" />
</a></li>
【问题讨论】：
-
一个友好的提醒，在您完成代码后尽可能填写其余的供应商前缀，这样其他供应商就不会感到被遗忘:)
-
不确定到底发生了什么 - 右侧的缩略图实际上下降到底部，在左侧的缩略图下方，而不是完全消失。此外，当我旋转 iPhone 时，缩略图会回到正确的位置。
-
你是对的。它们位于缩略图的左列下方。似乎它们位于页脚下方。
-
更新了我的问题。我在 iPad 上测试了它，它也不起作用。它似乎只影响 iOS safari 和其他运行类似代码的移动浏览器。也许是 webkit？
-
有人可以用安卓手机测试[test.davewhitley.com/not-wp/static_folder/index.php]（我的网站），看看它是否只是iOS Safari？
标签： css grid mobile-safari pseudo-class