http://allergy.6.ql.bz/tokusyu.html
上記サイトのtableの位置がIEとその他ブラウザでずれてしまいます。
http://css-happylife.com/archives/2007/1025_1325 …
上記のような情報があるのですが、このページの場合どのCSSに入れればよいのでしょうか?
またこれはいったいどんな原理なのでしょうか?
また下記のようにすればIEのバグの問題を解決できると聞いたのですが、これを入れれば解決できるのでしょうか?
*{
margin:0;
padding:0;
font:normal normal normal 100%/1.3 "MS Pゴシック","Osaka",sans-serif;
border:none;}
font:normal normal normal 100%/1.3 "MS Pゴシック","Osaka",sans-serif;
この記述の意味は何なのでしょうね?
No.2ベストアンサー
- 回答日時:
【カスケーディング】スタイルシート・・CSSを身に付けようとされているのでしょうね。
そのとき、最初に覚えなければならないのは、カスケーディングです。カスケーディングとは、「あることが次々に影響を及ぼしていく」と言うような意味で、CSSのもっとも便利な機能です。そのために、現在ではWeb標準となっています。(HTML5では宣言しなくてもCSSだと判断される。)
ところが、多くのCSS説明サイトではこの仕組みについての言及が、ほとんどされていません。
各ブラウザで表示が異なるのは、スタイルが適用される--カスケーディング--の仕組みが
ユーザーの最重要宣言
↓
著者の最重要宣言
↓
著者の宣言
↓
ユーザーの宣言
↓
デフォルトの宣言(ブラウザの持っているスタイルシート)
となっているからです。
★tableに関するプロパティを指定漏れがあると表示を同一には出来ません
★逆にtableに設定可能なすべてのプロパティについて、きちんと指定しておくと表示をそろえることが出来ます。
*{
margin:0;
padding:0;
font:normal normal normal 100%/1.3 "MS Pゴシック","Osaka",sans-serif;
border:none;}
の意味は、*(全称セレクタ=詳細度[0])で、margin,padding,font(簡略化プロパティ),borderについて指定しています。
しかし、それ以外のtableに関連するたくさんのプロパティや一般的なプロパティについては指定がありませんからカスケーディングのルールに従ってデフォルトのスタイルシートが適用されるからです。
本来は全称セレクタ(*)で、これらの指定を抹消するのは避けるべきです。これもデフォルトのこれらの設定を消してしまうため、すべての要素について適当な値を設定しなければならなくなるからです。
たとえば、箇条書きに関する(ul,ol,dl,dt,dd,li)などの要素について、すべて設定しなおさなければならなくなります。
カスケーディングを本気で身に付けようとされるなら、まずカスケーディングの仕組みについて学んでください。そうすると、無駄なHTMLを書く必要もなくなりますし、CSSも随分と簡単になります。
たとえば、現行のHTML(がきちんと書かれていたら)に一切class名やidを付け加えなくても、HTMLに手を加えずデザインを変えることが出来ます。
5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
(注)カスケーディングのうち詳細度などは、CSS2.1(現在ウェブ標準)では多少変更されています。ただ、CSS2.1の仕様書の邦訳は知りません。
→Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ )
→変更点 ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )はあります。
No.1
- 回答日時:
>上記サイトのtableの位置がIEとその他ブラウザでずれてしまいます。
tableがページ上のどの位置に表示されるかは「明確な規定が無い」ので、どこに表示されても文句は言えません。
また「CSSが必ずサポートされているという規定も無い」ので、ブラウザによっては、すべてのCSSを無視します。
なので「どのブラウザででも、必ず同じ位置にtableを配置する事は不可能」です。
このような「ブラウザの違いによる表示の違い」を解消する場合は「すべてを1枚の画像にする」しかありません(flashでも同様の解消を行えますが、すべてのブラウザでflashが動くという保証はありません)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- その他(プログラミング・Web制作) Windowsのバッチファイルについてご教示ください 5 2023/07/25 20:23
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
テーブルとテーブルの間隔について
-
HTML tableのセルにtextareaを...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
tableの位置がIEとその他ブラウ...
-
同じ幅指定のつもりなのに、ブ...
-
<table>のclass指定が継承されない
-
スタイルの無効化
-
HTMLのテーブルをExcelにCopy&P...
-
親要素のwidthは子要素のwidth...
-
table 幅固定で、端までいった...
-
tableタグの枠線について
-
パソコンで見るとレイアウトが...
-
テーブル内セルの大きさが途中...
-
html table の中のボーダーが二...
-
CSSで特定のテーブルだけに...
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
同じ幅指定のつもりなのに、ブ...
-
table表を横に並べる際の間隔指定
-
テーブル内のセル間にスペース...
-
textareaの外側の文字が下付き...
-
HTML tableのセルにtextareaを...
-
テーブルデータを折り返して表...
-
tableの位置がIEとその他ブラウ...
-
<fieldset>タグについて
-
正規表現で「より前」と「より後」
-
スタイルシートで左側だけ色を...
-
tableのcellpadding="0" cellsp...
-
tableを縦に続けるとtable間の...
-
HTMLのテーブルをExcelにCopy&P...
-
html5のテーブル内でdivのタブ...
-
スタイルの無効化
おすすめ情報