問題タブ [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.
css - CSSリセットはFirefoxで指定された要素を上書きします
最初にリセットを適用するスタイルシートがあります。これにより、多数のタグのマージンとパディングが0に設定されます。ただし、スタイルシートの後半で、特定のタグにマージンとパディングを適用します。しかし、何らかの理由で、Firefoxは非常に特定の場所でリセットを通過していません。
これが起こっていることの例です。以下は私のリセットです:
div
これは、クラスを持つ特定の要素にスタイルを提供するために追加した行ですmodified
。
Safariでその特定div
のものを調べると、スタイルシートに作成した行が表示され、それが適用されているように見えます。
Firefoxで、同じものでfirebugを使用するとdiv
、cssリセットコードのみが表示されます。
これを回避する方法はありますか?私は試しましたが、名前を変更するだけでなく、!important
名前を変更しましたが、それもうまくいきませんでした。div.modified
modified
css - cssをリセット(img)
私はCSSを初めて使用するので、簡単な質問があります。
これが私のスクリプトです=>
だから私の質問は、画像間のCSSリセットにもかかわらずスペースであり、それはもちろんレイアウトのスタイリング後にいくつかの問題を引き起こすので、誰もが解決する方法、画像間にスペースがなかったCSSをリセットする方法を知っています、ありがとう...
私は笑を推測しました、それは本当に非常に単純です、ただそれは一行で書かれなければなりません、さもなければそれはfont-size:0と宣言されなければなりません;
皆さんありがとう :))
html - 本文の周囲のマージン スペースを削除する方法、またはデフォルトの CSS スタイルをクリアする方法
私は確かに初心者ですが、これを投稿する前にかなりの量の検索も行いました。div 要素の周りに余分なスペースがあるようです。また、border: 0、padding:0 などのさまざまな組み合わせを試してみましたが、何も空白を取り除くことができなかったようです。
コードは次のとおりです。
これは次のようになります (余分なスペースを明示的に呼び出すために赤い矢印を挿入しました)。
青色がブラウザーのエッジとツールバーに直接接することを期待していました。画像は両方とも正確に 64 ピクセルの高さで、#header_div に割り当てられたものと同じ背景色を持っています。どんな情報でも大歓迎です。
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を表示する必要があります。とにかく解決するには?
css - * vs html、body、div、span、applet、object、iframe...など
現在私は使用しています:
しかし、なぜ人々が使い続けるのかはわかりません:
ほとんどのサイト (このサイトを含む) が 2 番目の方法を使用している特定の理由はありますか? そのようにCSSファイルサイズを大きくするには、非常に正当な理由があるに違いありません
css - Firefox 11 の組み込み css をオーバーライドする
body タグから 8px の余白を削除しようとしています。
試してみました(一度にすべてではありません)
と
と
そしてさえ
最後のものは機能しますが、Firebug を使用してスタイル属性を追加した場合のみです。元の HTML にある場合は無視されます。
私は機知に富んでいます。
編集:facepalm私はそれを理解しました。ブラウザ固有のスタイルを簡単に呼び出せるように、これを cfm に変更しました。ご協力ありがとうございました。
css - css リセット コンテンツ スタイルをリセットしないでください
meyerweb css reset を使用しています。正常に動作しますが、本文とテンプレート構造 ( <body>
、サイドバーなど) またはメイン コンテンツ (記事)にあるすべてのデフォルト スタイルがリセットされます。
大問題です!エディターでテキストのスタイルを設定したため ( TinyMCE
)、メイン ページでは、strong
、italic
または (順序付けられていない) リストなどのすべてのスタイルが失われます。
どうすれば解決できますか?<table>
特定のクラスまたは<div>
ID ( など)にあるタグを期待して、すべてをリセットするようブラウザに指示できます#content
か?
ありがとう。
css - ブラウザ間で非常に異なるフォントサイズ
更新: normalize.cssを使用した簡単なテスト例http://jsfiddle.net/7UhrW/1/を追加しました。
Chrome / WebKitとFirefoxには異なるレンダリングエンジンがあり、フォントのレンダリング方法が異なります。特に、サイズが異なります。これはそれほど驚くべきことではありませんが、驚くべきことはいくつかの違いの大きさです。
ページ上の個々の要素をより類似するようにいつでも微調整できますが、控えめに言っても、それは面倒です。私はより体系的な解決策を探していましたが、多くのリソース(SOの回答など)は単に「リセットパッケージを使用する」と言っています。これにより、パディングや間隔などの他の多くの問題が修正されると確信していますが、フォントのサイズに違いはないようです。
たとえば、http://html5reset.org/からリセットパッケージを取得すると、かなり大きな違いを示すことができます(インスペクターに表示されるレイアウトの寸法に注意してください)。[以下の画像は、実際にはこの回答で表示/サイズ変更されたものよりも高解像度です。たとえば、Chromeでは、右クリックして[新しいタブで画像を開く]ができます。]
Helveticaを使用すると、代わりにChromeの高さが短くなります。
別のフォントを使用すると、Chromeは再びはるかに高いフォントをレンダリングしますが、さらに文字間隔が狂ってしまいます(おそらくフォントの太字が原因です)。
* { line-height: 1; }
コメントで示唆されているように、単位なしで振りかけようとすると、同じ高さを生成しますが、ページ上の他の要素と同様に、垂直方向のオフセットが異なることがわかります。
私はいくつかのリセット/正規化パッケージを試しましたが無駄になりました。私はここで、これが実際に現実であり(IEやモバイルなどのより明白な犯罪者を省略している場合でも)、この混乱に対するいくつかの非常に優れた解決策を見逃していないことを確認したかっただけです。
css - * { color: inherit } と * { font: inherit } は CSS リセットの良いアイデアですか?
以下は、CSS リセットへの賢明な追加であると思いますか?
ここにデモがあります:http://jsfiddle.net/Daniel_Hug/QZWV6/
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タグでこれを修正する方法を知っていますか?