青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

Internet Explorer

scrollboosterでドラッグで横スクロールする機能を実装。IE11にも対応。

一番ありそうな場面は、 テーブルで、左列がstickyで固定されていて、2列目以降がスクロール出来るやつ。縦に長いテーブルだと横スクロール出来る入力デバイスを持っていないとスクロールバーをクリックしないとスクロール出来ないので操作がかなりめんどく…

IEでoverflowとpadding-bottomを同時に使うとpadding効かない

note.com neos21.net tamagondq10.blogspot.com タイトル通り、 overflow: scroll と padding-bottom を同時に使うとpadding-bottomが効かないらしい。 なので、display: blockで高さある疑似要素をafterとかで入れてあげると解決する。

IEでposition: fixedでmargin: autoでmax-width中央寄せにならない

position: fixed; margin: auto; max-width: 1200px; これ、IEで効かずに中央寄せになっちゃう。 stackoverflow.com これが解決策だった。 position: fixed; margin: auto; max-width: 1200px; width: 100% これ。max-widthがIEで意外とバグるイメージ。max-…

IEではclassList関連で使えない機能が色々ある。

hepokon365.hatenablog.com IEではclassListで使えない機能があります。 代表的なのがtoggleとか。 で、今回引っかかったのが const a = b.classList.value.replace(/-/g, '').split(' '); で、IEで未定義またはNULL参照プロパティ'replace'は取得できません…

IEだと游ゴシックちょっと下に隙間できる件

grow-group.jp いやこれどうしたらいいんでしょうね…IEのときだけフォント変えるのか、IEのとき判定して一律文字の位置調整してあげるのか…正直文字の位置を調整するのは現実的じゃない気がするしなあ…ボタンコンポーネントだけ一律調整してあげるのかなあ…

select要素のデフォルトのUIを消す 特にIEでは特殊な記述が必要

shinimae.hatenablog.com 基本的には、 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } これでいけるわけです。これでデフォルトで出る矢印のUIが消えてくれます。 しかし、IEではこれが効かない。 select{ -webkit-appeara…

JavaScriptのscrollToはIEとかSafariで効かないからPolyfillで対応

これがIEとSafariでは効かない。 window.scrollTo({ top: 100, behavior: 'smooth' }); 正確に言えばbehaviorが効かない。CSSのscroll-behaviorも同じく。 jQueryでanimateさせればよかったかもしれないが、今回はPolyfillで解決。 scroll-behavior-polyfill…

SVGをgulpのimageminのsvgoで画像圧縮かけると、デフォルトの設定のままだとviewboxの記述が消える、結果、IEでの挙動がおかしくなる…!

qiita.com codeday.me どうやらgulpのtaskの画像圧縮するタスクのgulp-imageminでsvgoでSVGを圧縮する際に、viewboxの記述を消してしまうそうで、そうするとIEで挙動がおかしくなる模様。 qiita.com のように、 imagemin.svgo({ plugins: [ // viewBox属性を…