問題タブ [css-reset]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
555 参照

css - CSSリセットはFirefoxで指定された要素を上書きします

最初にリセットを適用するスタイルシートがあります。これにより、多数のタグのマージンとパディングが0に設定されます。ただし、スタイルシートの後半で、特定のタグにマージンとパディングを適用します。しかし、何らかの理由で、Firefoxは非常に特定の場所でリセットを通過していません。

これが起こっていることの例です。以下は私のリセットです:

divこれは、クラスを持つ特定の要素にスタイルを提供するために追加した行ですmodified

Safariでその特定divのものを調べると、スタイルシートに作成した行が表示され、それが適用されているように見えます。

Firefoxで、同じものでfirebugを使用するとdiv、cssリセットコードのみが表示されます。

これを回避する方法はありますか?私は試しましたが、名前を変更するだけでなく、!important名前を変更しましたが、それもうまくいきませんでした。div.modifiedmodified

0 投票する
4 に答える
9723 参照

css - cssをリセット(img)

私はCSSを初めて使用するので、簡単な質問があります。

これが私のスクリプトです=>

だから私の質問は、画像間のCSSリセットにもかかわらずスペースであり、それはもちろんレイアウトのスタイリング後にいくつかの問題を引き起こすので、誰もが解決する方法、画像間にスペースがなかったCSSをリセットする方法を知っています、ありがとう...

私は笑を推測しました、それは本当に非常に単純です、ただそれは一行で書かれなければなりません、さもなければそれはfont-size:0と宣言されなければなりません;

皆さんありがとう :))

0 投票する
7 に答える
122972 参照

html - 本文の周囲のマージン スペースを削除する方法、またはデフォルトの CSS スタイルをクリアする方法

私は確かに初心者ですが、これを投稿する前にかなりの量の検索も行いました。div 要素の周りに余分なスペースがあるようです。また、border: 0、padding:0 などのさまざまな組み合わせを試してみましたが、何も空白を取り除くことができなかったようです。

コードは次のとおりです。

これは次のようになります (余分なスペースを明示的に呼び出すために赤い矢印を挿入しました)。

div 要素の周りの余分なスペース

青色がブラウザーのエッジとツールバーに直接接することを期待していました。画像は両方とも正確に 64 ピクセルの高さで、#header_div に割り当てられたものと同じ背景色を持っています。どんな情報でも大歓迎です。

0 投票する
1 に答える
1796 参照

css - CSSセレクターの例外

すべてのテーブル、td、divなどに適用されるリセット用の外部cssがあります。私のWebサイトには、ユーザーがhtmlで目的のコンテンツを作成できるようにするカスタマーテンプレートがあります。

この顧客テンプレートをWebページで表示するとき、外部のcssの上に適用したくありません。
そこで、この顧客テンプレートのコンテンツをdivに入れ、このdivとそのすべての子をcssから除外しようとしました。

指定されたdividの子ではないすべてのテーブル、td、divなどを選択するcssセレクターを作成することは可能ですか?

以下は私のテスト用htmlコードとreset.cssです。divcustomtemplateのコンテンツはユーザーによる動的入力です。ユーザーはborder=1をtableに試行し、reset.cssなしですべてのテーブルセルをborder1に適用します。ただし、cssをリセットすると、境界線は表示されません。私のユーザーはhtml/cssの専門家ではないので、単純なhtmlを作成し、テストページに書き込むときに表示されることを期待します。それらのhtmlがすべてのブラウザで完全に同じように表示されない場合、それはそれら次第です。
私には責任がありません。私はreset.cssなしでdivに彼らのhtmlを表示する必要があります。とにかく解決するには?

0 投票する
2 に答える
2910 参照

css - * vs html、body、div、span、applet、object、iframe...など

重複の可能性:
CSS リセットですべての要素をカバーするために「*」を使用しないのはなぜですか?

現在私は使用しています:

しかし、なぜ人々が使い続けるのかはわかりません:

ほとんどのサイト (このサイトを含む) が 2 番目の方法を使用している特定の理由はありますか? そのようにCSSファイルサイズを大きくするには、非常に正当な理由があるに違いありません

0 投票する
4 に答える
227 参照

css - Firefox 11 の組み込み css をオーバーライドする

body タグから 8px の余白を削除しようとしています。

試してみました(一度にすべてではありません)

そしてさえ

最後のものは機能しますが、Firebug を使用してスタイル属性を追加した場合のみです。元の HTML にある場合は無視されます。

私は機知に富んでいます。

編集:facepalm私はそれを理解しました。ブラウザ固有のスタイルを簡単に呼び出せるように、これを cfm に変更しました。ご協力ありがとうございました。

0 投票する
3 に答える
793 参照

css - css リセット コンテンツ スタイルをリセットしないでください

meyerweb css reset を使用しています。正常に動作しますが、本文とテンプレート構造 ( <body>、サイドバーなど) またはメイン コンテンツ (記事)にあるすべてのデフォルト スタイルがリセットされます。

大問題です!エディターでテキストのスタイルを設定したため ( TinyMCE)、メイン ページでは、strongitalicまたは (順序付けられていない) リストなどのすべてのスタイルが失われます。

どうすれば解決できますか?<table>特定のクラスまたは<div>ID ( など)にあるタグを期待して、すべてをリセットするようブラウザに指示できます#contentか?

ありがとう。

0 投票する
2 に答える
5716 参照

css - ブラウザ間で非常に異なるフォントサイズ

更新: normalize.cssを使用した簡単なテスト例http://jsfiddle.net/7UhrW/1/を追加しました。

Chrome / WebKitとFirefoxには異なるレンダリングエンジンがあり、フォントのレンダリング方法が異なります。特に、サイズが異なります。これはそれほど驚くべきことではありませんが、驚くべきことはいくつかの違いの大きさです。

ページ上の個々の要素をより類似するようにいつでも微調整できますが、控えめに言っても、それは面倒です。私はより体系的な解決策を探していましたが、多くのリソース(SOの回答など)は単に「リセットパッケージを使用する」と言っています。これにより、パディングや間隔などの他の多くの問題が修正されると確信していますが、フォントのサイズに違いはないようです。

たとえば、http://html5reset.org/からリセットパッケージを取得すると、かなり大きな違いを示すことができます(インスペクターに表示されるレイアウトの寸法に注意してください)。[以下の画像は、実際にはこの回答で表示/サイズ変更されたものよりも高解像度です。たとえば、Chromeでは、右クリックして[新しいタブで画像を開く]ができます。]

ここに画像の説明を入力してください

Helveticaを使用すると、代わりにChromeの高さが短くなります。

ここに画像の説明を入力してください

別のフォントを使用すると、Chromeは再びはるかに高いフォントをレンダリングしますが、さらに文字間隔が狂ってしまいます(おそらくフォントの太字が原因です)。

ここに画像の説明を入力してください

* { line-height: 1; }コメントで示唆されているように、単位なしで振りかけようとすると、同じ高さを生成しますが、ページ上の他の要素と同様に、垂直方向のオフセットが異なることがわかります。

ここに画像の説明を入力してください

私はいくつかのリセット/正規化パッケージを試しましたが無駄になりました。私はここで、これが実際に現実であり(IEやモバイルなどのより明白な犯罪者を省略している場合でも)、この混乱に対するいくつかの非常に優れた解決策を見逃していないことを確認したかっただけです。

0 投票する
0 に答える
316 参照

css - * { color: inherit } と * { font: inherit } は CSS リセットの良いアイデアですか?

以下は、CSS リセットへの賢明な追加であると思いますか?

ここにデモがあります:http://jsfiddle.net/Daniel_Hug/QZWV6/

0 投票する
2 に答える
593 参照

html - すべてのブラウザで同じマージンをレンダリングするにはどうすればよいですか?

いくつかのポイントを描画したHTML5キャンバス画像があり、ポイントの横にいくつかのdivタグとテキスト入力タグを配置したいと思います。

残念ながら、ブラウザは各divとinputタグの間のスペースに同意しません。

CSSで高さを指定することにより、入力タグのハックを見つけました。これで、入力タグはすべてのブラウザで同じスペースになります。入力タグのデフォルトの高さはブラウザによっては同じではなく、非常に奇妙なようです。

divタグについても同じことを試しましたが、すべてのブラウザーで正しい配置を取得できません。

CSSハックを使用するすべてのブラウザで機能するテキスト入力タグの配置:http: //jsfiddle.net/baptx/XcKZj/

ブラウザ(Firefox用に設定)によっては、divタグの配置が同じではありません:http: //jsfiddle.net/baptx/92gPY/

LinuxでFirefoxを使用していますが、Windowsバージョンでは同じマージンが表示されないことに気付きました。LinuxまたはWindowsで実行している場合、ChromeはLinuxFirefoxにも同意しません。Operaは素晴らしいです、それはLinuxまたはWindowsで実行されているLinuxFirefoxと常に一致します。

私が最初に思ったのは、Webブラウザエンジン、GeckoのレンダリングがWebkitとは異なるためでしたが、WindowsとLinuxバージョンのFirefoxが一致しない場合は、別のものになるはずです。

誰かとそれがどこから来たのか、そしてdivタグでこれを修正する方法を知っていますか?