27

Safari、Chrome、Firefox などのブラウザーのユーザー エージェント スタイルシートは、ブラウザーの内部にあるものであり、直接変更することはできません (むしろ、スタイル プロパティをオーバーライドする必要があります)。

また、Mozilla を含むさまざまな Web サイトで、Webkit と Mozilla のbox-sizingプロパティのデフォルト値が「content-box」であるという印象を受けています。

さまざまなブラウザーで表示されるかなり単純なダミー ページでこれをテストしました。

私の問題は、本番アプリケーションの 2 つのページでデフォルト プロパティが異なり、その理由が分からないことです。

Web インスペクタまたはコンソールで、「border-box」のボックス サイズ設定プロパティが 1 つのページに表示されます。CSS セレクターinput:not([type="image"]), textareaに割り当てられます。

他のページでは、Web インスペクターまたはコンソールで box-sizing プロパティについて言及されていません。

特定のページのユーザー エージェント スタイルシートのボックス サイズの定義に直接影響を与える方法があるかどうかは誰にもわかりませんか? 多分これを行うライブラリがありますか？アプリケーションでprototype.jsとswfobject.jsを使用しています...

更新: Web アプリケーションのほぼすべてのページと、box-sizing プロパティでテストしたすべての「ダミー」ページで明確でない場合は、デフォルトの「content-box」値があります。なんらかの理由で、Web アプリケーションの特定のページで、ユーザー エージェント スタイルシート (ブラウザがデフォルトで使用するスタイルシート) がそのプロパティを「border-box」に設定していることを Web インスペクターに表示します。私は一生、これがなぜなのか理解できません。Firefox がそのプロパティのデフォルト値を変更する可能性のあるものを探しています。

4

3 に答える 3

46

これと同じ問題がありました。私の場合、誰かが Javascript コードのスニペットを<!doctype html>. その結果、firebug を使用して DOM を調べたところ、ドキュメントに Doctype がないように見えました。

文書型なし

doctype 宣言がファイルの一番上にあるように JS コードのスニペットを削除すると、doctype が再び表示され、ボックスのサイズ変更の問題が修正されました (あなたが持っていた問題と同じです)。見る：

HasDoctype

お役に立てれば。

于 2011-11-30T18:42:43.293 に答える
6

Chrome で同じ問題が発生し、デフォルトで次のユーザー エージェント スタイル ルールが追加されました。

input:not([type="image"]), textarea {
    box-sizing: border-box;
}

doctype プロパティを追加した後<!DOCTYPE html>、ルールは表示されなくなりました。

于 2013-05-31T02:03:02.800 に答える
2

いいえ、ブラウザのデフォルトのスタイルシートを変更することはできません。また、フォーム フィールドに関しては、ブラウザによってボックスのサイズ変更に関するルールが異なります。これは、CSS でスタイルを設定できないネイティブ OS ウィジェットを使用してフォーム フィールドを完全に実装していた古いブラウザとの互換性のためです (そのため、'border' や 'padding' 自体がありませんでした)。

box-sizing//ルールをサイトのスタイルシートに入れてみません-moz-box-sizingか? -webkit-box-sizing私にとってはうまくいきます。これを使用して、最新のブラウザ間で設定された幅の入力を並べることがよくあります。(ただし、IE 6–7 ではサポートされていないため、追加のヘルプが必要です。)

于 2011-09-23T20:28:37.823 に答える