问题是滚动容器是div，而不是body。这会导致 Google Chrome 和 iOS 无法记住div用户转到另一个页面然后返回后的滚动位置。
相关的CSS代码如下。滚动容器是#container.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
#container {
height: 100%;
overflow: auto;
}
而这里是一个演示上的jsfiddle。请在 Google Chrome 和 iOS 上重现该问题，方法是将内容滚动到大约 50%（或任何其他明显长度），单击超链接转到另一个页面，然后单击浏览器的后退按钮。
有没有一种简单的方法可以让 Google Chrome 和 iOS 像 Firefox 一样记住滚动位置？
== 编辑以回应答案 ==
一个简单的 .html 文件，用于测试是否有任何代码onbeforeunload有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
window.onbeforeunload = function () {
alert('Are …因此，我尝试为我的用户创建一些标签图像，显示他们获得的总积分。我正在尝试将 SVG 写入 php 文件，该文件将添加动态内容，例如用户的点。我想使用 HTML<img>标签从文件中获取 SVG image_gen.php。
如何通过标签显示 SVG <img>？
谢谢！
设置的代码rootMargin如下所示。
let observerOptions = {
root: null,
rootMargin: "100px",
threshold: []
};
当我将其设置为 时100px，根元素的边界框不会增长 100 像素；当我将其设置为 时-100px，根元素的边界框不会缩小 100 像素。
这是一个关于 jsFiddle的例子。该示例直接取自MDN 的 IntersectionObserver 文档，我只更改了rootMargin.
有一些ARIA教程网站使用非语义标记和一些JavaScript在于向世人证明使用role="radiogroup",并role="radio"如下面的例子:
<ul role="radiogroup">
<li tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif">
Option1
</li>
<li tabindex="0" role="radio" aria-checked="true">
<img role="presentation" src="radio-checked.gif">
Option2
</li>
</ul>
但是,role当我们已经拥有语义和无javascript方法时,使用这些方法有什么意义:
<ul>
<li>
<input id="opt1" type="radio" name="opt" value="1">
<label for="opt1">Option1</label>
</li>
<li>
<input id="opt2" type="radio" name="opt" value="2">
<label for="opt2">Option2</label>
</li>
</ul>
这个网站有一个奇特的效果:当点击导航链接时,内容会淡出,当新页面(在不同的URL上)加载时,其内容会淡入.
有趣的是,在用户点击浏览器的"后退"按钮后,他们会返回上一页,内容仍会淡入.换句话说,上一页不会停留在淡出状态,这是最后一次看到的.根据这个评论,页面应该保持在其最后看到的状态.
我尝试了很多方法来重现这种效果,但在我的测试中,点击"返回"按钮后,上一页仍然没有显示任何内容(内容保持在淡出状态).有时它适用于某些浏览器但不适用于其他浏览器.有时候它可以工作,但是在重新打开浏览器之后就没有了.
网站如何实现这种效果,即使在用户使用"后退"按钮转到上一页后也能正常工作？
===编辑1 ===
===编辑2 ===
上述测试页面已经在三台不同的PC上使用Firefox进行了测试,Firefox从第4版到第20版都通过在线跨浏览器测试服务进行了测试.结果是一样的:不起作用.
keywords来自Schema.org 的属性,因为它以复数形式表示,似乎暗示它的值应该是一行逗号分隔的文本.如下例所示:
<p itemprop="keywords">lorem, ipsum, dolor, sit, amet</p>
这让我想起了<meta name="keywords" content="lorem, ipsum, dolor, sit, amet">我们过去<head></head>因为SEO原因而放置的标签.
但是,从语义学的角度来看,我认为上面的例子是不正确的,因为关键字应该是一个单词列表.因此,应该使用该<ul>元素进行标记.
关于如何使用HTML5和Microdata标记博客文章的关键字,是否存在共识？
根据一篇关于CSS-Tricks的文章,未来的视网膜显示媒体查询可以写成:
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here */
}
如果我想为非视网膜显示器编写CSS代码怎么办？
我知道您可以先为非视网膜显示器编写一些CSS代码,然后使用上述媒体查询覆盖视网膜显示.但有没有专门针对非视网膜显示的媒体查询？
我想让图像在容器内水平和垂直居中.如果它们的宽度或高度大于容器的宽度或高度,那么在保持其比例的同时使它们自动收缩.
我在容器上使用以下CSS代码来尝试实现目标:
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
此外,我知道通过使用CSS位置和变换也可以实现目标.但是这种方法通常会在调整大小的图像和容器的边框之间产生1个像素的间隙.也就是说,调整大小的图像无法触及容器的边界,它应该在哪里.因此我不得不求助于CSS flexbox.