どうも7noteです。IEは嫌いです。

デザインに合わせるため、selectboxにheightを指定。しかし・・・

「IEで見たらプレースホルダーは見えなくなるし、入力した文字も消えるしなんてこっちゃ～～～！！！」

困りました。

もちろんGoogleChromeで見ればheightを指定していても綺麗に見えます。

対策

今回取った対策としては、デザインは優先させたかったのでheightの指定は消さずに残したままにしました。
代わりにIEだけ、heightに初期値を指定することで対応しました。

sample.css

select{height:35px;/* これだけだとIEの時に表示がおかしくなる */}/* IEの時だけ効くCSSを記述して初期値に上書きする */@mediaalland(-ms-high-contrast:none){img{height:auto;}}

object-fit: cover;を使おうと思って、スライドショー（slick.js）にobject-fit: cover;を入れ、IEにも対応させるため「fitie.js」を読み込んだところ、

「jsが動作しない・・・」

渋々object-fit: cover;はあきらめて、width:100%;だけ残してhieghtは初期化で対応。。。

sample.css

img{width:100%;height:100%;object-fit:cover;}/* IEの時だけ効くCSSを記述して初期値に上書きする */@mediaalland(-ms-high-contrast:none){img{height:auto;}}

object-fitなど、早くIEでもスムーズに使えるようにアップデートを期待しながら、
小手先でちまちま修正していくしか今はどうしようもなさそうです。
他にもIEでheightを指定してうまくいかなかった例があれば追加していきたいと思います。

最後に1つだけ。

~~IEは嫌い。~~