この質問に触発されて、私はこの興味深い現象を見つけました。
width:-200px;負の幅は違法であるため無視する必要があるため、 や のようなスタイル プロパティは効果がないと予想されwidth:calc(0% - 200px);ます。そして確かに、最初のものはそうではありません。ただし、2 番目のものは無視されません。代わりに幅 0 が使用されます。
次の例を参照してください。
div {border:1px solid; background:lime;}
#badwidth {width:-200px;}
#badcalc {width:calc(0% - 200px);}Div with bad width:
<div id="badwidth"> </div>
Div with bad calc:
<div id="badcalc"> </div>width プロパティが無視された場合、div はその全幅になります (一番上のものなど)。ただし、0 に折りたたまれています (左側の黒い線を参照してください。これが境界線です)。
calc(0% - 200px)参考までに、1) それ自体はエラーではないこと、2) それらが正常に動作し、最初のスニペットが異常であることを示すために、他の div をいくつか示します。
div {border:1px solid; background:lime;}
#calc {margin-right:calc(0% - 200px);}Plain div:
<div> </div>
With calc(0% - 200px) in a place where it's OK:
<div id="calc"> </div>では、通常の幅と計算された幅の動作が異なるのはなぜですか?
ブラウザが 1 つだけの場合は、バグと呼びます。しかし、彼らはすべてこれを同じように扱います！だから私が見落としている何かがあるに違いない。何？