css3は互換モードで動作しません。

-1

かなり単純に私はアニメーションタイルタイプのボタンを作りたいと思う。問題（おそらく古いサーバー）はわかりませんが、css3プロパティは機能しません。（私はie11を使用しているので、ブラウザで動作するはずです）。css3は互換モードで動作しません。

は、以下の私のコードで、動作していないものをRGBAまたは遷移

回避策上の任意の助けをいただければ幸いですが（私はCSS3の属性であると信じる私が間違っている場合は、私を修正してください）で、私はmodernizrを使用しようとしましたが、それはまったく私をいたずらしました。

<!DOCTYPE html> 
<html> 
<head> 
    <title>title</title> 
    <link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css"> 
    <style> 
.tile{ 
    height: 190px; 
    width: 190px; 
    overflow: hidden; 
    background-repeat: no-repeat; 
    max-width: 100%; 
    text-align: center; 
    vertical-align: middle; 
    background-size:190px 190px; 
} 

.caption{ 
    background-color: rgba(0,0,0,0.4); 
    overflow: hidden; 
    color: #fff; 
    font-weight: bold; 
    margin: 150px 0px 0px 0px; 
    height: 190px; 
    width: 190px; 
} 
.caption:hover { 
    transition: margin .5s; 
    margin: 0px 0px 20px 0px; 
    background-color: rgba(0,0,0,0.4); 
    cursor: pointer; 
} 

#description{ 
    overflow: hidden; 
    margin: 25px 0px 0px 0px; 
} 
    </style> 
</head> 
<body> 
    <h1>Welcome</h1> 
    <div class="tile" style="background:url('images/tile1.jpg'); background-size:190px 190px" > 
     <div class="caption" onclick="alert('test');" > 
      <p>Some caption</p> 
      <p id="description">Some lengthy description that may potentially overflow into two lines</p> 
     </div>`enter code here` 
    </div> 
</body> 
</html>

編集:: これは実際には互換モードが原因である私の下のポストごとのように、これは回避策場合ので、誰もが知っているサイトを使用して、大多数の人々に強制されますか？透明性については

出典

2016-04-13 elboffor

はうまく動作します：https://jsfiddle.net/wmg7hxc4/あなたはあなたがどんな問題を抱えているかをより明確にすることができますか？ – KWeiss

これはFirefoxとChromeで動作します。そのようなことは、IEのどのバージョンやエッジでも機能する可能性は低いですが、なぜそうでないのか分かりません。 IEで動作しない場合は、FFやChromeのような最新のブラウザーを常にチェックインする必要があります。 – Rob

@Rob IEで動作します – KWeiss

background: rbga(...)プロパティを経由して透明性があなたの例につき just as expected in Internet Explorer 11を働いているように見える

：

別のオプションは、同様の機能CSS opacityプロパティを、使用することですあなたのユースケースには、しかし、それだけで透明度のレベルを処理します。ただし、ターゲット要素と要素のすべての子要素に適用されるため、機能は少し異なりますが、常に最適な選択であるとは限りません。

opacity: 0.4;

移行が問題であるならば...

あなたは要素の外に置くとトランジションを表示したい場合、あなたは非ホバー上transition財産をも必要となります同様に、セレクタは：

.caption{ 
    /* Other properties omitted for brevity */ 
    transition: margin .5s; 
}

以下に実証することができる。

あなたには起こりそうなことはありますか？

出典

2016-04-13 12:31:17

あなたの返信ありがとう、私はjsfiddleで自分自身を試してみたように、トランジションと不透明度が期待どおりに動作することを知っています。コードが正しいように見えますが、）。移行とrgbaの代替案を試す必要があります。 @Rionは "不透明度："を適用し、div全体には影響しませんか？ – elboffor

ご使用のInternet Explorerのバージョンが互換モードで動作している可能性はありますか？これにより、経験している問題のほとんどが簡単に説明されます（古いバージョンやQuirksモードではこれらの新しい機能がサポートされない可能性があります）。IE内で開発ツール（F12）を使用して確認することを確かに検討します。そして '不透明度'は実際にはそれが対象とする子要素の下にあるすべての子要素に影響します。したがって、単一の要素に適用する場合、 'background：rgba（）'アプローチが優先されます。 –

私はそれがjsfiddleや他のサイトで動作するので、私はそれが私のブラウザではないと言ったように。私は本当に原因がわからない：/ – elboffor

css3は互換モードで動作しません。

答えて

関連する問題