忍者ブログ
*ADMIN*

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

≪ 2024.04│ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ≫
2024-04-16(Tue)

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

author:あるふぁ [22:31:34]│ Comment(-) │ Trackback(-) │〆

│▲

2006-04-11(Tue)

CSSのブラウザ上の誤差

WinIEはmarginとpaddingの認識が少々他のブラウザと異なる。

ググッてみればかなりの記事が引っかかる。

いま、ちょっと導入を悩み中なのが、このスタイル指定
html * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
公開中の「蒼」は入れなくても崩れないようにある程度余裕を持たせてるので大丈夫だけれど、もし1pxでも狂うとデザインが崩れるって場合には必要になってくるのかしらん？

上の指定はwidth, height の計算方法に関係するらしいので少々困る。

どーゆーコトかというと、各ブラウザにおけるCSSの認識の差があるってこと。

CSSでの認識は以下のとおり。
「width, height の示す幅・高さの範囲に内、文字等が全て収められ、padding, border はその外周に追加する形で表示する」

これが CSS1/CSS2 の仕様で、CSS3でも初期状態の解釈としてこれがあります。
CSS3でbox-sizing: content-boxと指定した場合はこの初期状態になる。

でも、WinIEの認識はこう。
周囲の padding, border 領域分も合計してそれが width, height 値と同じになる

ってこれじゃWinIEで狂うわけだ。
じゃあbox-sizing: border-box;の指定はなにか。
CSS3では、上のWinIEの認識を他のブラウザでもさせることができるっていうしろものらしい。

-moz-box-sizing:はMozilla(FireFox)の独自拡張。
なので、他のブラウザには関係ない。
でも、入れてあったほうがいい？

うーん。頭混乱してきた（←_→）？？
PR

author:あるふぁ [16:57:37]│ Comment(1) │Trackback() │〆

[ブログ]雑文

│▲

新しいことが増えて･･･← HOME →共有テンプレートの著作権表示
＊COMMENT-コメント-
▽興味深いです
MSIEのmarginとpaddingの解釈の違いは知ってましたが、CSS3でそんな宣言が追加されるんですかー。
便利ですね〜（＾＾
σ(^ー゜)も書くようにしようかなぁ‥。

でも実はMac版IEでもおかしいので、それだけじゃ安心出来ないという罠があったり(笑
しかもClassic MacのUAは終了しているので、バージョンが更新されて対応されることはないのですよ(泣

あと、それだけじゃなく、IEはmarginの相殺も他と違ってないです？？
詳しく確認出来ないので未だに癖がつかめなくて困ってます。
あるふぁさん、解明したらまた記事にして御教授下さい〜

注：このコメントはキャッシュを元に再現しました。
本来の投稿時間は｢2006-04-13-Thu 01:47:31｣です。
posted by みうみう URL ::2006-05-31-Wed 15:39:19 ::EDIT
△Re:興味深いです
しばらく、ネット落ちしてました。
変身遅くなってごめんなさい。

CSS3の追加はいろいろあるみたいですね。
でも、よくわからないものもあったり。

＞あと、それだけじゃなく、IEはmarginの相殺も他と違ってないです？？
＞詳しく確認出来ないので未だに癖がつかめなくて困ってます。
＞あるふぁさん、解明したらまた記事にして御教授下さい〜

あーなんかそれっぽいことどこかで読んだ気が・・・
分かれば記事にしてみます。

注：このレスは復元です。｢2006-04-14-Fri 18:44｣がもともとの投稿時間です。
あるふぁ│2006-05-31-Wed 15:40
＊COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
　
Name：
Title：
Mail：
Url：
Color：
◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆
Decoration： Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message：
Pass： ※編集時に必要です。
Secret： 　※チェックすると管理者へのみの表示となります。
＊TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
←No.58No.57No.56No.47No.46No.45No.44No.43No.42No.41No.40→
■Category
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
　徒然倶楽部 →こちらは記事の内容を下に移転＆閉鎖しました。
　現在は十六夜's Blogがメインブログになってます。
 　Alphaの小部屋･･･BOOKLOGで作った本棚
　Mixi･･･参加中のSNS
　十六夜-the sixteeth night-･･･現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況：Windows XP SP2
ブラウザ：主にFirefox　他IE、Opera等
解像度：1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ１件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
03

05
日 月 火 水 木 金 土
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
■CM&TB
●コメント

●トラックバック
    Scrollbar ONorOFF
    ■NinjaLink
    ■Thanks
    テンプレートを作成するに当たってよく利用させていただいているサイト様です。
    ■QRcode
    QRコードをクリックするとメールフォームが開きます。
    メールフォームでPCから携帯にこのブログのURLを送ることができます

    もし、携帯電話で表示されきれない～とご不満の方はこちらのアプリを導入してみることをお勧めします。

    無料体験できるのでぜひお試しください♪
    ■EntryNavigation
    ≪ *58*57*56*47*46*45*44*43*42*41*40* ≫
    ■Template
    ○公開したテンプレのプレビュー

    ブルーチャイナ
    詳細     		ブルーチャイナ
    詳細
    Gray2block
    詳細     		China
    詳細     		Gray
    詳細
    JapanBlue
    詳細     		碧
    詳細     		蒼
    詳細
    ○公開された携帯用テンプレのプレビュー

    The Leaf
    詳細
    ○忍者ブログで共有化中のテンプレ

    ●Alternation-緑×白-
    記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
    パンくずナビも付いてます♪

    ●The Leaf
    初の携帯用テンプレート。さわやかな感じに仕上げてみました
    絵文字使用。トップページにカテゴリー表示アリ。

    ●ブルーチャイナ
    涼しげなチャイナ風左右メニューテンプレ。
    ｢China｣の色違いのような感じですが、配置は違いますのでご注意ください。
    ※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
    ⇒ピンクチャイナ

    ●Gray2block
    ノート風テンプレ｢Gray｣の２カラム版です。
    ●China
    かわいい系の３カラムテンプレート。イメージはチャイナ風♪
    同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
    ⇒China-BlueVer-

    ●Gray
    灰色のノート風罫線テンプレ。追記開閉式の３カラムです。

    ●JapnBlue
    サッカー日本代表ユニフォームなテンプレ。追記開閉式
    ※このテンプレには２カラムバージョンもあります。
    ⇒JapanBlueの２カラム版

    ●碧-midori-
    淡いパステルグリーンのテンプレ。追記開閉式

    ●蒼
    画像使用なしの５ブロックテンプレ。

    Scrollbar ONorOFF

    ○広告




    ■Recommend
    ○ルナエンバシージャパン

    ストレイシープがなんだかかわいくて好き(^-^*）

    ■Visiter