html - HTML5 & CSS3 使用多个伪类和 translateX/Y 属性

Question

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

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

我的测试页在线http://www.brodylahd.com/index2

回复 陈猫

是的，我认为这就是我需要做的......但它仍然会有相同的水平运动吗？

Answer 1

这是在 中定位锚点的问题iframe，因此如果您定位它们，浏览器往往会以其中的内容为中心。

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

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

页面将在视觉上更正确地居中，但仍会滚动。

如果您仍想使用 CSS，您可以尝试将您的 links+#aN:target .page{…}行为更改为一个，这将使用会出现在.pageblocks:之前的标签和单选按钮#aN:checked+.page{…}，但我不确定浏览器是否会滚动使用收音机而不是链接时的页面。

Answer 2

缩略图链接在单击时将其容器对齐在屏幕的最顶部，因为您在 href 属性中使用了像 #a1 #a2 #a3 这样的锚点（ Uri Fragments ）。

您可以尝试使用这样的小型 javascript 解决方法来删除该片段或防止页面内移动：

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