IE11でmax-widthが効かない時。

IE11 用のハック

要素に対してwidthではなく、max-widthを指定しておくと、より少ないコードでレスポンシブなデザインが実現できるため、非常にお手軽である。

しかし我らが宿敵IE11では、max-widthが適用されず悲惨なことになってしまう。

対処法はとても簡単 要素に対してwidth:100%を追加するだけ。

.contents{
    width: 100%;
    max-width: 400px;
}

これだけで、IE11でもmax-widthが適用される。