IE8で閲覧した画像

Question

新しいウェブサイト、http://blgz.co/で作業していますが、奇妙な理由ですべての画像が圧迫されています!!!!!私はここ数時間、問題を解決しようとして無駄に過ごしました。どんな助けも素晴らしいだろう！ありがとう。

Answer 1

を「希望」を取得します。それを削除し、すべてのあなたのイメージは、通常は流れます：

img { 
    height: auto; 
    max-width: 100%; /* remove */ 
} 

Answer 2

これはmax-width: 100%スタイルのため、タグに適用されます。あなたのケースでは23pxのみですが、これは親の.node .field-name-field-op-main-imageにfloat: leftがあるため、インライン要素として機能します（ただし、画像の幅を考慮しないか、後で画像の幅を設定することになります）。言い換えれば はどちらかfloat:leftまたはmax-width:100%削除し、あなたがあなたのグローバルimgタグに最大幅の宣言を追加している理由を理解することはできません結果

Answer 3

が、私はこのパーティーに遅れてんだけど、私はただ、この問題に自分自身を走った、と単純にオプションを親要素をされた浮動ないmax-widthを削除するかどうか。その結果、私は本当解決策を見つけなければならなかった：ちょうど例えば、width:auto;を追加：

皮肉にもその後、IE8をするために使用されるように振る舞うようになったすべてのブラウザ しかしクロム20、に素晴らしく働い

img { 
    height: auto; 
    width: auto; 
    max-width: 100%; 
} 

を。だから私はIE8をターゲットにCSSハックに頼っのみ：誰もがフリークアウトする前に、私はすでにハックを使用してブートストラップCSSフレームワークのリセット、この特定の変更を作っているので、私はCSSハックを選んだ今

img { 
    height: auto; 
    width: auto\0/; 
    max-width: 100%; 
} 

他の場所。あなたは白い帽子のルートを移動したい場合は、簡単なあなたのHTMLに条件付きのコメントを追加することができます

<!--[if !IE 8]> 
    <style type="text/css"> 
     img { width: auto; } 
    </style> 
<![endif]--> 

つ以上のノートを、あなたは* .lessファイルに上記のハックを使用している場合は、あなたを

width: e('auto\0/'); 

Answer 4

私の場合、IE8は、明示的なwidth: 46px; CSSに従いたくなかったいくつかの理由：それをエスケープするために以下のコンパイラはそれを窒息されますがあります。

Fix：min-width: 46px;を追加すると、他のブラウザを壊さずにIE8が正しい幅で表示されます。