替代样式表未显示在 Firefox 中的“视图 > 页面样式”下

lor*_*ro2 5 html css firefox stylesheet

我有以下代码:

...
<head>
  <title>Alternative Style Sheet Example for MDC</title>
  <link href="./default.css" rel="stylesheet" type="text/css" title="Default Style">
  <link href="./simple.css" rel="alternate stylesheet" type="text/css" title="Simple">
  <link href="./insane.css" rel="alternate stylesheet" type="text/css" title="Insane">
</head>
...
Run Code Online (Sandbox Code Playgroud)

(来自https://developer.mozilla.org/samples/cssref/altstyles/index.html)。如果我在 Firefox 中打开 html 文件的本地副本,则备用样式表不会显示在 Firefox 中的“查看 > 页面样式”下,我只能看到“无样式”和“基本页面样式”选项。但是,如果我打开上面的链接,所有样式表都会在选择中正确显示(“无样式”、“默认样式”、“简单”和“疯狂”)。还在 Chrome 中使用 Alt CSS 扩展进行了测试,行为相同。

如何使选项对本地副本也可见?

lor*_*ro2 3

看来如果我只是在 Firefox 中打开本地 .html 文件,样式表切换不会按预期工作。但是,如果我运行网络服务器并通过本地主机打开同一文件,则样式表切换确实有效。

就我而言,我在包含 .html 文件的目录中运行以下命令(使用 python 2.x):

python -m SimpleHTTPServer 8000
Run Code Online (Sandbox Code Playgroud)

然后,当我localhost:8000在 Firefox 地址栏中输入内容后,样式表替代项会在“视图 > 页面样式”菜单下正确显示(与file:///{path}/index.html在地址栏中输入相反)。

该解决方案也适用于 Chrome 和 Alt CSS 扩展。