IE11でpaddingがマイナスの値になる？

htmlのレイアウトについて質問です。

前提・実現したいこと

htmlのレイアウトで、
(～768px：スマホ、今回は関係ないため省きます)
768～900px：リキッドレイアウト
900px～：横幅900pxで中央寄せ

hタグに横幅いっぱいの背景色をつけ、内容は
768px～900px：左端
900px～：900px幅を画面中央配置したときの左寄せの位置
にくるように記載したい。

制約事項：html側の修正はできない(wrapper追加等)

発生している問題・エラーメッセージ

上記を実現するため、下記のCSSを記述しました。

h1 {
  background: #ccc;
  padding: 0 calc((100vw - 900px) / 2 - 10px); /* 10pxはスクロールバー分 */
}

chrome、FireFox、Edgeでは想定通り表示されるのですが、
IE11では768～900pxで内容がウィンドウの左に見切れていってしまいます。
デベロッパーツールを見ると、paddingにマイナスの値が入っているように見えます。
calcを使わず、paddngにマイナスの値を入力した場合は、値が不正として無視されることは確認しました。

IE11では、paddingにcalcを用いるとマイナスの値が許容されてしまうのでしょうか。

解決方法ご教示いただけますと幸いです。

nonoshu

2021/08/10 13:05

Microsoftがサポート終了を表明しているIE11に対応する理由等あるのでしょうか？ chrome、FireFox、Edgeで想定通り表示できているなら十分では、と思ってしまいまして・・・

quartetto_99

2021/08/11 03:05

個人的な気持ちとしてはそうなのですが、現状サポート中であること、シェア率が5%程度あること、そして本対応においては、テキストが見えなくなる恐れがあるため修正の必要があると考えています。多少崩れる程度なら許容できるのですが… 暫定対応としては、メディアクエリで900pxにbreakpointを追加で置こうと思っています。(できれば避けたかった)