IceHoneyIceHoney
IceHoney

css

macOS下运行红警2游戏

css

Linux 用户有钱就换 Mac，我也日常使用 Mac 电脑了。但是对于童年回忆的红警 2 游戏，我还是想在 Mac 上玩一玩。这里记录一下在 Mac 上运行红警 2 游戏的过程。

下载原版红警 2 游戏 ​

网上应该有很多下载地址，我这里就不提供了。下载完之后，先使用 windows 电脑安装一下，然后把安装好的游戏文件夹拷贝到 Mac 电脑上。

安装 CrossOver ​

CrossOver 是一款可以在 Mac 上运行 Windows 程序的软件，我们可以使用 CrossOver 来运行红警 2 游戏。CrossOver 有 14 天的试用期，我们可以先下载试用一下。

在 CrossOver 中，我们先创建一个 Bottle，然后在 Bottle 中复制安装好的游戏文件夹。之后再配置环境变量，让内部 OS 使用中文运行避免乱码问题，找到 Bottole 的 cxbottle.conf

在最后的环境变量配置中添加下面的内容：

bash
[EnvironmentVariables]
"LC_ALL" = "zh_CN.UTF-8"

下载游戏补丁 ​

由于红警 2 是 2000 年的游戏了，所以在现在的电脑上运行会有一些问题，我们需要下载一些补丁来修复这些问题。

下载 cnc-ddraw 补丁，并复制到游戏目录下，然后在 CrossOver 中打开 Wine Configuration，选择 Libraries，添加一个 override，然后输入 ddraw，点击添加并应用。

设置分辨率 ​

红警 2 的默认分辨率是 800x600，这个分辨率在现在的电脑上看起来太小了，我们需要修改一下分辨率。并且开启相关的渲染优化，打开 ra2.ini 文件，修改成下面的内容：

ini
[Video]
VideoBackBuffer=no
AllowVRAMSidebar=no
AllowHiResModes=yes
ScreenWidth=1728
ScreenHeight=1117
StretchMovies=no

上面是我的 MBP 16 寸的分辨率，如果你的电脑分辨率不一样，可以自己修改一下。修改好之后，就可以通过运行 ra2.exe 来启动游戏了。

总结 ​

M1 电脑也是可以运行老游戏的，就是需要折腾一下。希望能帮助大家回忆童年。

参考 ​

Set Windows application to use a different language than the OS default

cnc-ddraw

How to run Red Alert 2

嵌套表格如何实现边框合并

css

最近做的项目中有大量表格展示数据的需求，而且还涉及到嵌套表格的情况，这时候就需要考虑如何实现边框合并的问题了。

表格的边框合并 ​

css
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

我们可以使用上面的 CSS 来描绘表格的边框，而且相邻两个单元格共享同一个边框。但是如果我们在表格中嵌套了另外一个表格，这时候就会出现边框重叠的问题。

嵌套表格的边框合并 ​

针对嵌套表格会显示双重边框的问题，我们有两种解决方案，一种是父表格手动删除嵌套表格单元格的边框，另一种是让子表格的边框和父表格的边框重合。 第一个实现方式非常简单，只需要在父表格中删除嵌套表格单元格的边框即可，但是这样做会导致父表格的边框和子表格的边框不重合，而且视觉上不美观。 第二个实现方式需要在子表格中添加一些 CSS，让子表格的边框和父表格的边框重合。我们可以使用下面的 CSS 来实现：

css
table table {
  width: calc(100% + 2px);
  margin: -1px;
}

通过上面的 CSS，我们可以让子表格的边框和父表格的边框重合，这样就可以解决嵌套表格显示双重边框的问题了。

总结 ​

视觉上让表格边框重合的方法本质上发挥想象力利用 margin 可以设置成负值，然后使用 calc 函数来计算宽度，这样就可以让子表格的边框和父表格的边框重合了。

参考 ​

nested table with collapse border

CSS如何处理固定Header哈希标记跳转的问题

css

有些前端网站一直都有固定的 Header 显示导航，如果我们文档内部有使用 ID 和#符号来帮助跳转到文档某个位置的话，就会被 Header 遮挡住，那我们怎么处理才能让跳转内容正好显示在 Header 下方呢？答案很简单就是让带有 ID 的这个元素占据的空间包含 Header 的高度。

padding 和 marging 搭配使用 ​

为了保证多占据的空间和 Header 的高度保持一致，我们可以使用 CSS 变量来存储 Header 的高度，这样就能保证一致性。

css
h1[id] {
  padding-top: var(--header-height);
  margin-top: calc(var(--header-height) * -1);
}

margin 可以设定成负数来吃掉撑起来的高度，所以会使元素占据的高度等于显示的高度加上 Header 的高度，这样跳转的时候就能保证内容显示到 Header 下方了。

伪元素来撑起空间 ​

css
h1[id]:before {
  content: '';
  display: block;
  width: 0;
  height: var(--header-height);
  margin-top: calc(var(--header-height) * -1);
}

有些时候我们不方便编辑 id 元素本身的 CSS 属性，所以我们可以借助伪元素来实现这个效果。

总结 ​

在 CSS 的世界中，margin 的负值有很多妙用，例如显示列表中如果卡片之间有左右间距，但是最外层却需要和容器保持左右一直，我们也可以使用 margin 的负值来解决这个问题。

参考 ​

offsetting an html anchor to adjust for fixed header