SuperMemo 折腾（1）—— 使用 IE 10 渲染 HTML 组件

date

Feb 21, 2022

slug

make-supermemo-use-ie10

status

Published

前言

SuperMemo 18 使用 mshtml.dll 调用 IE 渲染 HTML 组件。故可以通过注册表控制 IE 浏览器的行为，包括更改使用版本，详见 https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/general-info/ee330730(v=vs.85)。经过我的测试，SuperMemo 18 最多能支持到 IE 10，使用 IE 11 的话会导致 HTML 组件只能显示不能编辑。

缺点

SuperMemo 18 设计使用的 IE 版本为 IE 7，所以如果强行改变的话会导致一些意想不到的问题。这些问题都是 HTML 组件所导致的，对库没有影响。在我目前的使用体验当中，遇到过以下问题：

点击 SVG，或一些不被 IE 7 支持的元素时会弹出点击事件无法处理的报错（见下图）。我的处理方法就是直接把他关掉，除了弹出报错影响操作流程性之外没有发现任何副作用。

解决方法

为 body 添加一个文本伪元素，内容为空格，行高覆盖整个组件，让 SuperMemo 认为我们点击的元素是文本，就不会报错了：

body::after {
  content: "\00A0";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 96vh;
}

会导致 SuperMemo 18 崩溃，不过这种情况极少发生，我用了将近三个月了，目前只遇到过一次。直接重启即可。

阅读标记（Reading Point）无法使用。

解决方法

开启 IE 10 之后，是可以设置 Reading Point 的，但一跳转就回到了开头。所以我猜想是因为 SuperMemo 18 没有检测到 HTML 组件应有的高度。对比并观察了开启和关闭 IE 10 的滚动条位置，发现 IE 10 下滚动条是蓝色框框在外面的，而默认是在蓝色框框外面的。而蓝色框就是我们的 html 元素，其下是 body 元素，故 SuperMemo 18 设置阅读标记的时候检测的是 body 元素的 offsetTop。故增加下面的 CSS 即可修复此问题：

html {
  height: 96%;
  width: 100%;
  overflow: hidden;
  
}

body {
  overflow: scroll;
  height: 100%;
}

优点

说完了缺点来说下优点。从 IE 7 到 IE 10 是一个很大的版本跨越，性能上 IE 10 的渲染速度比 IE 7 快很多，并且 IE 10 支持很多 IE 7 所不支持的 CSS、JavaScript 特性。对我来说比较重要的是 IE 10 支持 SVG。

修改注册表

让 SuperMemo 18 HTML 组件使用 IE 10

打开 Windows 注册表编辑器：Windows + R 然后输入 regedit 或使用 Windows 搜索功能（Windows + S）输入”注册表”即可看到注册表编辑器；

转到以下路径：

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
   SOFTWARE
      WOW6432Node（非 64 位系统没有这一项）
        Microsoft
           Internet Explorer
               Main
                  FeatureControl
                     FEATURE_BROWSER_EMULATION

右键右侧空白处，在弹出的菜单当中新建一个 DWORD（32 位）值

名称输入 sm18.exe ，双击新建好的项，基数切换到 十进制 ，数值数据输入 10000 （即使用 IE 10）后点击确定即可

添加注册表完毕之后，重启 SuperMemo 18 。添加一张空白卡，编辑其 HTML 并输入以下内容

<html><head></head><body border: thin solid blue; overflow: auto;" contenteditable="true" auto;"="" blue;="" solid="" thin=""><p>&nbsp;</p>
<script type="text/javascript">
	var div = document.createElement('div')
    div.innerText = navigator.userAgent
    document.body.appendChild(div)
</script>
</body></html>

查看 SuperMemo 18 HTML 组件的 UA，可以看到的确使用了 IE 10。

开启兼容模式

通过以上步骤虽然成功让 SuperMemo 18 使用了 IE 10，但 SuperMemo 18 在编辑 HTML 组件之后会强制过滤一些 HTML 的内容。这就会导致至关重要的 <!DOCTYPE HTML> 被删除，从而会导致一些新特性无法使用。所以需要通过开启 IE 的兼容模式，使在 <!DOCTYPE HTML> 丢失的情况下也能使用新特性。

同样的，注册表转到以下路径（与 FEATURE_BROWSER_EMULATION 同一目录）

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
   SOFTWARE
      WOW6432Node（非 64 位系统没有这一项）
        Microsoft
           Internet Explorer
               Main
                  FeatureControl
                     FEATURE_DOCUMENT_COMPATIBLE_MODE

添加一项 DWORD（32 位）值，名称同样是 sm18.exe ，值为十进制的 100000

点击确定并重启 SuperMemo 18 即可生效

总结

经过以上两个步骤，SuperMemo 18 的 HTML 组件就在 IE 10 的兼容模式下渲染了，使用愉快~