スポンサードリンク

Chrome / Firefox / Edge / IE11 / Safari で同じwebページを表示して印刷プレビューを確認していたら、1ページ目がヘッダだけの表示になってしまうブラウザが2つあった。

 

【Firefox】と【IE11】では、変なところで改ページしてしまい、ほぼ空のページが出来てしまっていた。

他のブラウザは普通に表示されている。

 

コンテンツの量を減らしてみたら、両方とも1ページ内に収まった。

全然??でわからない。

 

■ページの構成は「header」「wrapper」「footer」のシンプルな構成です。

 

■どうやら「header」「wrapper」の間で改ページされてしまうようです。

 

■印刷の改ページを制御するcssを設定してみた。

改行を禁止する以下の3パターンを試してみたが、全く効かなかった。

こちらはブロック要素のみ効くと書いてあった。

・page-break-after: avoid;
・page-break-before: avoid;
・page-break-inside: avoid;

 

さっぱりわからない…

「wrapper」のコンテンツ量を減らすと1ページにキレイに収まる。

ブロック要素ごと改ページされてしまうようです。

 

■inlineをためしてみた。

これでいいのか?やっていいのか?はわかりませんが、ブロック要素ごと改ページされていたので、「wrapper」を「display: inline;」とプリント用cssで設定したら、改ページされなくなった!!

とりあえずこれでやってみよう。

 

 

 

mac Safari / iPad Safari でtableで結構複雑な表を組んでtdに文字とイメージを入れて作成したところ、tdからイメージが下にはみ出ている箇所があり、下のセルに被っていた。

webインスペクタで調べてみるとpadding分がマイナスになっているみたいな感じです。
色々調べてみると「table-layout: fixed;」「border-collapse: collapse;」が悪い的なのをみつけたが、改善はされなかった。

仕方なく、適用しているcssを1つずつコメントして悪い箇所を探してみる。

結果はリセットcss内にあったtdに対しての「vertical-align: baseline;」だった。
これを「top」や「middle」などに変更したらはみ出すのが直った。

結構はまった…
cssのみでアイコンを作る練習をはじめました。
なかなか思うようには出来ないですね。

moru cssアイコン

少しずつ更新していくつもりです。

「rem」って単位を知らなかった。
調べてみたら分かりやすいサイトがあったのでメモ。

CSS3 「rem」って何だ。
このサイトによると、
----------------------------------------------------------------
「rem」は プロパティではなく単位になります。
単位表示でおなじみの「em:エム」に似ていますが
「em」の様に親要素の値に影響を受ける事はありません。
----------------------------------------------------------------
とありました。
知りませんでした・・・

親要素に影響を受けないので、使いやすそうです。
Operaには対応していないそうです。
その場合には「px」と両方指定することにより、対応できるそうです。


 word-breakプロパティとword-wrapプロパティの違いについていい記事があたのでメモ

word-breakプロパティとword-wrapプロパティの「break-all」の違い

word-breakプロパティにもword-wrapプロパティにも「break-all」という強制的に改行する値を指定できるのですが、この違いは何なのでしょうか。

IEやSafari、Google Chomeはどちらのプロパティの「break-all」も使えるのですが、その差を見てみると、日本語に違いはありませんが、英語のショートセンテンスにおいて、 word-breakプロパティは単語の途中でも強制的に改行してしまいますが、word-wrapプロパティは単語の後の半角スペースで改行してくれるようです。

word-wrapプロパティは最新のブラウザならほどんど使える事、また、英単語の途中で強制的に改行しないことを考えると、word-wrapプロパティを使うのが望ましいと言う事ですね。


元記事:word-breakプロパティとword-wrapプロパティの違い





Safariでiframeにスクロールバーが出てしまい、表示がくずれた・・・

回避方法があったのでメモ。

----------------------------------------------------

iframeでスクロールバーを常に表示させない為には、
属性としてscrolling=”no”を指定します。

とある作業にて上記の記述をしたのですが、その際、
FirefoxとIEでは期待通りの動作をしてくれました。
しかし、Safari、Opera、Chromeでは
スクロールバーが表示されてしまいました。

理由は、iframe内のhtmlが使用するcssに
下記の記述があった為でした。

html {
overflow-y: scroll;
}

-----------------------------------------------

元記事:iframeのスクロールバーを消す際の注意点


h:1/f:1
cssで要素を透過させる 「opacity」についてメモ

    filter: alpha(opacity=50); /*IE*/
    -moz-opacity: 0.50; /*Firefox*/
    opacity: 0.50; /*Opera・Safari*/

親要素に「opacity」を設定し透過させ、子要素に「position:relative」を設定するとなぜか「IE」は透過しなくなる。


h:1/f:1

なるべく使わないようにしてるけど、ついつい使ってしまうCSSハック。
いつも検索して調べていたけど、なかなか全てのっていない・・・
CSSハックについて、すばらしい記事を見つけたのでメモ。

Webクリエイターボックス
CSSハック一覧 – IE, Firefox, Safariなどなど




h:2/f:1


font-sizeを%指定するときに便利な一覧表を見つけたのでメモ。

基準フォントサイズ:12px (16px × 75% = 12px)
目標サイズ 指定% 実際のサイズ(px)
8px 67% 8.03333px
10px 84% 10.0833px
12px 100% 12px
14px 117% 14.0333px
16px 134% 16.0833px
18px 150% 18px


基準フォントサイズ:14px (16px × 87% = 14.0833px)
目標サイズ 指定% 実際のサイズ(px)
8px 57% 8.03333px
10px 71% 10px
12px 86% 12.1167px
14px 100% 14.0833px
16px 114% 16.05px
18px 128% 18.0333px


基準フォントサイズ:16px※ここは自分で付け足したので合っているかわかりません。
目標サイズ 指定% 実際のサイズ(px)
8px 50% 8px
10px 63% 10.08px
12px 75% 12px
14px 88% 14.08px
16px 100% 16px
18px 113% 18.08px
19px 119% 19.04px
20px 125% 20px
21px 132% 21.12px
22px 138% 22.08px
23px 144% 23.04px
24px 150% 24px
25px 157% 25.12px
26px 163% 26.08px

※実際のサイズはFirefoxのプラグイン『Firebug』を使用して算出しているとのこと。
 また、目標サイズをギリギリで超える%を指定しているそうです。

元ページ:「CSSサンプルプログ: font-sizeを%で指定するときにちょっと便利な一覧表

h:1/f:1
1

スポンサードリンク