0

数分前、私は非常に奇妙な現象に出くわしました。

Firefox や Safari は解釈するだけではないようです

left: -50%;

と

left: -50px;

だけでなく、

left: -50%px;

この動作を示すためにJSFiddleを作成しました。

クラス .strangePositioner の CSS を前述の 3 つの値のいずれかに変更してみてください。それぞれで異なる結果が表示されます。

私の最初の意図は、幅が内側のコンテンツによって定義されている外側の div の左端に要素を配置することでした (この例では「ストレッチャー」と呼ばれます)。CSS 定義を間違って入力したため、最終的には正しい結果になりましたが、誤って有効な定義ではないことがわかりました。とか、そう思いました。

Q: ブラウザーがこれをそのように解釈するのはなぜですか? (構文の問題は別として) 有効な CSS ですか? 有効な CSS でない場合、どの標準に準拠していませんか?

4

4 に答える 4

2

私はあなたのjsfiddleを見ているだけで、左の引数を単に省略するか、 left: 0; を使用するだけで、BOOMを左に揃えることができました。

したがって、FF と Safari は %px を認識し、その行を無効として扱い、デフォルト値の left: auto (0) のままであると結論付けます。

また、firebug の計算値を使用してチェックアウトすると、要素に left が定義されておらず、left: auto; を継承していることがわかります。

ブーム！

于 2012-08-22T10:30:50.677 に答える
1

left: -50%px;は有効な css ではありません。またはのいずれ%かを使用してくださいpx

于 2012-08-22T10:16:19.577 に答える
0

その無効な CSS と、ほとんどのブラウザーにあるような有効な CSS パーサーは、宣言を破棄し、代わりにデフォルトまたは継承された左の値を使用します。私が試したすべてのブラウザーで同じ結果が得られるため、使用しないでください。表示される結果はセットアップに固有であり、次の Firefox の更新で変わる可能性があります。

以下は、FF(14)、Safari、Chrome(21) で得た結果の画像です。

すべてのブラウザの結果

于 2012-08-22T10:32:24.310 に答える
0

結果を観察し、少し遊んでみました。top値の変更が実際に左の位置にどのように影響するかは奇妙です。また、同じコードで異なる結果が得られることもありました。間違いなく有効な css http://www.w3.org/TR/css3-values/はありません。クロスブラウザーではなく、予測可能な動作を期待することはありません。私のアドバイスは、有効なcssに固執することです!

于 2012-08-22T10:16:51.327 に答える