不痛不痒，看似 bug 又非 bug 的一个 bug

最近的一个项目中，对于 CSS 的一些属性一些选择符可以大胆使用，然后很意外得撞上一个 iOS 中 Safari 的一个解析问题。

<Component style={{height: "calc(100vh - 46px)"}}>一个组件</Component>

这样的一段代码很简单，然而就是这样的一段简单的代码，在 iOS 中出现了让误以为不兼容 [style*='100vh - 46px'] 这个写法。

为什么说是误以为呢，因为当时有一个需要是要在移动端中去改变这个组件的高度，所以，我就想着，为什么不用属性选择符来快速实现呢，这样还可以不用去考虑写类名。于是我就写了这么一句 CSS。

[style*='100vh - 46px'] {
  height: calc(100vh - 100px) !important;
}

在 Chrome 里模拟移动端看看，嗯，很 OK 么，高度改变了。

然而也就只是高兴了一下，就在 iOS 中发现高度并没有改变。十分好奇，通过数据线接上手机，打开 Safari，进入开发者菜单找到 iPhone 选项，开始调试 iPhone 上的打开的这个页面。

⇧⌘C，开始选择元素，然后在 iPhone 上点一下那个组件元素，快速定位到对应的元素上。然后在 DOM 中发现了一个很神奇现象。原本应该是 100vh - 46px 的属性值，变成了 -46px + 100vh 了。所以也就是为什么我的 CSS 没有作用的原因了。

就因为这个原因，我刚开始都怀疑是不是 *= 这个属性选择符的规则还存在兼容问题，或者是中间的 - 减号需要转义之类的。没想到啊没想到，居然还会有这样的一个情况出现。

最后为了考虑两者兼容，于是只好暂时委曲求全一下，写成这样了。

[style*='100vh - 46px'],
[style*='-46px + 100vh'] {
  height: calc(100vh - 100px) !important;
}

现在想想啊，还不如直接写一个 className 来的实在，何必折腾呢。但不折腾一下，自己也不知道居然还会有这样一个情况存在。