問題タブ [css-reset]

これが私のHTMLコードです：

これが私のCSSファイルコードです（style.css）：

ただし、の背景色はbody変わりません。

CSSをリセットしなくても、正常に機能します。より良いCSSリセット、または他の解決策を提案できますか？

<embed />タグを<div>. 現在、iframe に似たスクロール ボックスにつながることが多い任意の高さと幅が追加されます。

divのように動作させるための「埋め込みリセット」を知っている人はいますか?

編集:実際には、内部コンテンツに基づいて高さを取得する方法を理解する必要があります。これが私がこれまでに持っているものです：

ありがとう、マット

たとえば、Meyerリセットには要素¹の長いリストがあり、これを*？に置き換えることができると思います。

私はいくつかの使用を見てきました：

しかし、より「高度な」リセットは、タグを明示的に示すことで行われるようです。

タグリストでカバーされていない（おそらく）aでカバーされている要素は、、、および*ですinput。button実際select、Eric Meyerのリセットは、これらの要素を実際にはまったく処理していないようです。これらの要素のリセットを回避することが問題である場合…なぜそうしませんか？ブラウザは明らかに、すべてのフォーム要素が同じであるとは限りません。

^{興味があれば1 。html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, I, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video}

Eric MeyerのCSSリセットを使用するつもりでしたが、ブラウザー間の違い（inputマージンなど）に遭遇しました。それに基づいて、私はより積極的なアプローチを思いついた：

（これは時代遅れです。この質問の最後にある現在の改訂版を確認し、必要に応じて批判することを忘れないでください）

テストしたすべてのブラウザでスムーズに機能しました。

• IE7
• IE8
• Chrome（最新）
• Firefox（最新）
• オペラ（最新）

質問は：誰かがここで何か問題を見ますか？私はCSSがあまり得意ではないと思っているので、これが将来問題になるかどうかはわかりません。

Obs.:このリセットはクロスブラウザの問題のみを対象としています。、、、などinputの要素の一般的な規則に従う必要があります（または従う必要があります！）（例：「テキスト」タイプの場合は、境界線なしでは表示されません！）。後で一般的なスタイルなどを追加します。今のところ、私は物事をリセットし、主要なブラウザ間で同じではない（ほとんど）すべてを取り除きます。acodeinputa

非常に遠くにある問題

• セレクターはパフォーマンスの*問題を引き起こす可能性があります。

• いくつかの*ルールを持つセレクターは、要素のいくつかのデフォルトのスタイルを、それらが回復できない方法でオーバーライドします。例：input「送信」タイプののデフォルトスタイル。

• 驚いたことに、:before, :after { content: ''; }Firefoxの一部の要素が壊れていました。

• 改訂版ではmargin: 0、すべての入力要素に設定しようとしました。ほとんどのブラウザは、入力タイプcheckboxと。に対してそれを無視しましたradio。

改訂版

終わり

さて、リセットを改善しようとすればするほど、マイヤーのcssリセットのように見えたので、私はあきらめてそれを採用しました。うまく動作します：p

重複の可能性：
最高のcssリセット

CSSリセットを実装するための最良の方法は何ですか？私の質問は、クロスブラウザー、クロスプラットフォームに準拠するレイアウトの実装に関連しています。たとえば、レイアウトは、Firefoxなどのデスクトップブラウザでも、iPadでも、ある程度はiPhoneでも同じように見えるはずです。

これを達成するためにCSSリセットを適用する必要があるかどうかを教えてください。

Firefoxアドオンを使用して任意のページに挿入できる要素があります。

当然、それとその祖先は、そのページで定義されているCSSルールの影響を受けます。

これまでのところ、すべての属性について明示するだけで取得できますが、それでも、私の宣言は、より具体的なページ上の以前の宣言によって上書きされる可能性があります。

不必要に特定のセレクターを大量に混乱させたり、を使用したりせずに、特定の要素（ ）の下にあるすべての要素の属性をリセットし、この親要素の下にある宣言が確実に適用されるようにするに!importantはどうすればよいでしょうか。div#my_root_container_element

iFrameの使用は1つのオプションですが、可能であれば避けたいと思います。別の方法はありますか？アプリケーションを考えると、ソリューションはFirefoxでのみ機能する必要があります。

ありがとう。

私は小さな写真スライダーに取り組んできました。ChromeとFFでは見た目が少し違うので、CSSをリセットすると両方とも同じように見えると思いました。Yahoo!を使用しました YUI CSSはモデルをリセットしましたが、何も変更されていません。FFでは見栄えがしますが、Chromeでは右側の[再開]ボタンが高すぎて、大きな画像の下部にある細い灰色の線がメインボタンのある場所で途切れます。URLは次のとおりです。

http://www.replayground.com/slider/02.html

円の下のものは無視してかまいません。そこにあるものをテストするだけです。

02.htmlファイルに追加したものは次のとおりです。

CSSリセットを正しく機能させる方法についてのアドバイスが本当に欲しいです。あなたが見る特定のボタンの問題を修正する方法ではありません。ページに要素を追加するので、毎回これを実行する必要はありません。

CSSリセットをWebGLThree.jsライブラリと一緒に使用しても大丈夫ですか？何か影響はありますか？

既存のアプリケーションをExt3.xから4に更新している最中ですが、ExtのスコープリセットCSSオプションを有効にして、Extがアプリケーション全体にCSSリセットを適用しないようにしましたが、別のアプリケーションに遭遇しています。問題。私のアプリケーションは、ハードコードされた、extで生成されていないHTMLおよびCSSスタイルを多数使用しており、その多くはExtコンポーネント（パネル、タブパネルなど）に含まれています。明らかに、このhtmlはextコンポーネントの要素を含む子孫であるため、 CSSリセットスタイル。その結果、Ext以外のhtmlのカスタムスタイルを完全に強化します。

具体的には、問題を引き起こしている2つのCSSルールがあります。

このプロパティはそれほど問題ではありませんでした。ボックスのサイズを「content-box」に戻す独自のリセットラッパークラスを作成し、そのクラスをカスタムhtmlの最上位のラッパー要素に適用するだけでした。そのルールは次のとおりです。

ただし、他のCSSルールは、否定するのがそれほど簡単ではないものです。

このルールが非常に面倒な理由は、カスタムHTMLのすべての異なる要素が同じマージンとパディングを持たないため、ボックスサイズ設定の場合と同じようにこれらのスタイルをオーバーライドすることはできません。そして、このルールが私のカスタムCSSスタイルの大部分よりも優先される理由は、それ自体がCSSクラスよりも高い特異性を持っているためです。つまり、「。x-reset div」セレクターのマージン/パディングスタイルは、「。my-cool-class {padding：5px; margin：5px;}」for''のようなルールのスタイルをオーバーライドします。

これを克服するために、当然、カスタムcssを更新して、ターゲットとする要素のタイプ（ "div.my-cool-class"）をクラスセレクターの前に付けるか、ルールの前に.x-を付けることで、ルールの特異性を高めることができます。 reset（ ".x-reset .my-cool-class"）、ただし、これらのオプションのいずれかでは、ファイルサイズの追加やモジュール性の制限は言うまでもなく、既存の大量のカスタムcssを手動で更新する必要があります。 CSSクラス。

それで、Extの設定を介して、またはおそらく私が単に見落としている他のCSSソリューションを介して、この問題をエレガントにそしてうまくいけばあまりオーバーヘッドなしで解決できる方法はありますか？