css - IE9 css media queries not working properly...Works fine everywhere else

Question

Check out this fiddle in IE9 and try resizing the browser. As you can see the error message doesn't work properly. It works fine in Webkit, Firefox and Opera so far.

This is my current code:

@media screen and (max-width: 480px) {
  #my-form label {
    text-align: left;
    display: block;
    padding-bottom: .3em;
  }
  #my-form .error {
    position: inherit;
    display: inline-block;
    left: 0;
    top: 100%;
    margin-top: 4px;
    width: 200px;
  }
  #my-form .error:after {
    content: "";
    position: absolute;
    top: 0;
    margin-top: -16px;
    left: 50%;
    margin-left: -8px;
    border-style: solid;
    border-width: 8px 8px 8px 8px;
    border-color: transparent transparent #313b53 transparent;
  }
}

What could be the problem? I can't seem to figure it out. IE9 is the only one that doesn't work as expected...

Answer 1

それを私が直した。IE で問題を引き起こしている 2 つのことがあったようです。最初に、デフォルトのコードをerrors481 などの別のメディア クエリに移動しました。

@media screen and (min-width: 481px) {
  #my-form .error {
    position: absolute;
    width: 150px;
    right: -171px;
    margin-right: -20px;
    top: 50%;
  }
}

そして、代わりにフロートを使用しinline-blockました。IEにはまだ問題があるようinline-blockです：

@media screen and (max-width: 480px) {
  #my-form label {
    text-align: left;
    display: block;
    padding-bottom: .3em;
  }
  #my-form .error {
    float: left; // Here
    clear: left;
    top: 100%;
    margin-top: 4px;
    width: 200px;
  }
}

デモ: http://jsfiddle.net/elclanrs/BMz9U

Answer 2

ヘッダーにjsファイルrespond.src.jsを追加して、この問題を修正しました