HTML5&；使用多个伪类和translateX/Y属性的CSS3

所以首先让我承认我不是最擅长编码的，我是一名平面设计师，但我正在努力自学HTML5。我已经设法解决了我的大部分问题，但现在我被难住了

基本上，我的问题是，当您在iframe中单击缩略图时，它会将缩略图与屏幕顶部对齐。我尝试将translateY添加到“page”类中，也尝试在iframe页面中添加translateY，但这导致了主图片未对齐

我的测试页面在

回复陈猫

---

是的，我想这就是我需要做的。。。但它还会有相同的水平移动吗？

单击屏幕顶部对齐it容器的缩略图链接，因为您在href属性中使用了类似于#a1#a2#a3的锚定（）

您可以尝试使用如下小型javascript解决方案删除这些片段或防止页面内移动：

$('#thumbs').find('a').bind('click', function() {
    return false;
})

---

这是在

iframe

中定位的一个问题，因此，如果您以浏览器为目标，浏览器往往会以其中的内容为中心

在您的情况下，最简单的解决方案（但并不理想）是控制滚动的位置，因此如果您要添加

#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }

页面的居中位置在视觉上更加正确，但仍会滚动

---

如果你想继续使用CSS，你可以尝试将你的链接+

#aN:target.page{…}

行为更改为一个，这将使用标签和单选按钮，这些标签和单选按钮将位于

之前。page

块：

#aN:checked+.page{…}

，但我不确定当您使用收音机而不是链接时，浏览器是否会滚动页面。

您的意思是要在iframe中滚动页面，以便将当前交互相册与iframe顶部对齐？我只是不想要“页面”div在按下缩略图时垂直移动，因此iframe应聚焦到当前页面？我已合并了您基于cookie的帐户，您现在可以在“答案”下留下评论并编辑您的问题。请考虑将OpenID与您的帐户联系起来，以避免将来出现这种情况。