box-sizingは危険なCSS / レイアウトや位置がどうしても意図した通り設定できない場合は、box-sizingを疑う

CSS

結論

 状態:-  閲覧数:1,518  投稿日:2015-09-05  更新日:2015-09-05
box-sizing設定変更は、サイト全体に対して甚大な影響を及ぼす
・「理解している人が設定変更する場合」は問題ないが、よく分からない人が設定変更すると、泣きを見るかも
※そのサイトの「box-sizing設定が変更されていることを知らない人」、もしくは「box-sizing自体を知らない人(昨日までの私)」が、取り組むとハマる可能性がある

トラブル遭遇例1 / Bootstrap をアップデートしたら、jQueryで取得される値が変更

 閲覧数:245 投稿日:2015-09-05 更新日:2015-09-05 

Bootstrap 3.3.4


Bootstrap をアップデートしたら、jQuery offsetメソッドで取得される値が変更
・それまで整数で返ってきていた戻り値が、ある日いきなり小数点で返ってくるようになる

原因を特定できない
・ブラウザの問題?
・jQueryの問題?
※原因を想定すら出来ず、苦しむ


犯人はbox-sizing


調査した結果、判明した事実
・bootstrap.cssに記述されていた 下記box-sizingによる影響を受けていた
* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}


具体的には、下記組み合わせの場合において取得値が変更される可能性がある
・box-sizing: border-box;
・SVG viewBox
・border
※いや、普通は分からないでしょう、そんなの


box-sizing: border-box;


トラブル遭遇例2 / perspective使用時に、どうしても天地左右中央に配置できない

 閲覧数:255 投稿日:2015-09-05 更新日:2015-09-05 

天地左右中央に配置できない


display: table-cell;指定しているのに位置が微妙にズレる
・もしかして、perspectiveだから?
→ 関係なかった


犯人はbox-sizing


bootstrap.cssに記述されていた 下記box-sizingによる影響を受けていた
* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}



対応


初期値で上書き
* {
   box-sizing: content-box;
}

※ライブラリCSSは極力変更しない、という方針に基づき


floating 3D objects using nested transformations (with preserve-3d)


box-sizing をみんな賞賛し過ぎ! そんなに魅力的なプロパティとは思えない。むしろ出来れば使用を避けたい

 閲覧数:185 投稿日:2015-09-05 更新日:2015-09-05 

絶賛の嵐


タイトルだけを読めば、導入すれば全てが解決するようにもとれる
box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
borderもpaddingの数値も気にしなくていい!!cssのbox-sizing


ネット情報に反論


魔法のプロパティではない
・「ボックスサイズの算出方法」を変更する危険(影響度が大き)なCSSプロパティ
・ある一面だけ見れば魔法のように便利な側面があるかもしれないが、それはあくまでも全体の一部分でしかない

borderやpaddingの数値を気にする必要はある
・従来とは計算方法を変更するだけ
・borderやpaddingの概念や数値が、レイアウトの世界から実際に消えてなくなるわけではない
・つまり、裏では、それに伴う処理が発生している
・単純な例では自動で対応する(?)ようだが、複雑な場合(SVG viewBox × border など)は手動で対応する必要が生じてくる

トラブル遭遇例3 / 吹き出し位置がズレる

 閲覧数:209 投稿日:2016-07-11 更新日:2016-07-11 

Bootstrap読込


吹き出し位置がズレる

原因
▼bootstrap.min.css
*, ::after, ::before {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
}


対応
・既存CSSを修正することなく、後から読込むことで上書き
/*既存CSS競合対策*/
*, ::after, ::before{
   box-sizing: content-box;
}



aタグのクリック範囲を、囲っているタグ範囲まで拡大する

CSS Transforms Module Level 1



類似度ページランキング
順位 ページタイトル抜粋
1 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 39
2 resizeが効かない場合は、min-heightを設定してみる 38
3 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 33
4 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 30
5 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 30
6 「z-index」が効かない時は「-1」を指定してみる 29
7 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 29
8 Illustrator間で、ベクターデータコピーがどうしても出来ない場合は、Illustrator複数起動を疑う 29
9 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 28
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 28
11 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 28
12 IE8で、フォームの縦位置がどうしても真ん中にこない場合の、最後の手段(案) 28
13 PhotoshopCS3 で、テキストをアウトライン 27
14 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 27
15 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる 26
16 「z-index」が効かない時は? / 「position:relative」を指定してみる / 「z-index:-1」を指定してみる 26
17 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 26
18 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ 26
19 Firefox 8.0 にしたら、Firebugタイトル部分の半角スペースに‌·が入るようになったので、メモ 26
20 レスポンシブ / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、嫌になるぐらい分かりづらい 26
2021/7/28 9:07 更新
週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新