忍者ブログ
02 May

[PR]

×

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

15 May

flexbox　バグ　IE

★上下中央寄せにならない
http://cmz.wp.xdomain.jp/?p=1002

囲っているものにdisplay:flex;をする
min-heightを使っているとダメらしい。heightならOK。heightがダメだからmin-height使ってるっつーのにIEまじしねよ



★画像がアスペクト比がおかしくなる対処法
https://personal.loudandproud.me/flexbox-ie-image-bug/
img {
  flex-shrink: 0;
}

★要素がはみ出す
https://qiita.com/hashrock/items/189db03021b0f565ae27#2-align-itemscenter-%E3%81%AF%E3%81%BF%E5%87%BA%E3%81%99%E5%95%8F%E9%A1%8C

囲っているものと、飛び出しているものにmax-with:100%;をつける
でも上下中央もなくなっていた…いつのまにか上下中央ができていないIE11まじ死ねよ


IEは早く滅びてほしい
web見た目の発展を妨げる害悪クソブラウザ
作業量が増えてどうしようもないゴミブラウザ
PR
08 May

背景画像をhoverとかで拡大縮小したい

https://rfs.jp/sb/html/html-css-lab/background-image-zoom.html
ありがたいコードをコピペする

<div class="wrap">
<div class="背景設定"></div>
</div>

外枠にoverflow:hidden
背景設定に背景指定してtransform　matrix

coverを使うことがほとんどだから、ためになった
coverはscaleやbackgroud-sizeはうまくいかない
09 April

display:noneとopacity　アニメーションの共存

https://qiita.com/youcune/items/b0bb4c5979071d53eb99

transitionだけでopacityとdisplay:noneでフェードイン/アウトやろうとしたら
transitionが効かない

はー？と思って調べたらdisplay:block→noneは効かないって・・・
じゃあanimationでやろうとしたら、animationもだめだって
しかもanimationだと始点→終点で、transitionみたいにhoverの付け外しで双方の動きにならない
あーめんどくせえええ
09 April

スクロールしたいがスクロールバー非表示

だらだらメニューが長いスマホメニューとかでよくある
jqueryいれたらoverflow:hidden;かかってて、子メニューが多いやつで困ることがある

https://oar.st40.xyz/article/105

このサイトのありがたいコードを貼り付けることにより解決する
firefoxについて書いてないが、これいれてfirefoxでも大丈夫だった

Chrome　safari
.scrollbar_none{
    overflow-y:auto;
}
.scrollbar_none::-webkit-scrollbar{
    display:none;
}
IE
.scrollbar_none{
    -ms-overflow-style:none;
}