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

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

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

困りました。

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

対策

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

sample.css

select {
  height: 35px;     /* これだけだとIEの時に表示がおかしくなる */
}

/* IEの時だけ効くCSSを記述して初期値に上書きする */
@media all and (-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を記述して初期値に上書きする */
@media all and (-ms-high-contrast: none) {
  img {
    height: auto;
  }
}